-
- {this.props.title &&
)
)
}
}
-Alert.propTypes = {
- type: PropTypes.oneOf(['info', 'error', 'success', 'warning']),
- onClose: PropTypes.func,
- content: PropTypes.string,
- title: PropTypes.string,
- closeable: PropTypes.bool,
- duration: PropTypes.number
-}
-
Alert.defaultProps = {
prefixCls: 'hi-alert',
type: 'info',
diff --git a/components/alert/style/index.scss b/components/alert/style/index.scss
index 2aa75598c..d79a71833 100755
--- a/components/alert/style/index.scss
+++ b/components/alert/style/index.scss
@@ -1,103 +1,55 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
+
+$color-map: (
+ 'primary': use-color('primary'),
+ 'warning': get-color($palette-secondary, 'warning'),
+ 'success': get-color($palette-secondary, 'success'),
+ 'danger': get-color($palette-secondary, 'danger')
+) !default;
.hi-alert {
position: relative;
padding: 9px 11px;
- background: #ebf2fd;
- border: 1px solid #b3cdfb;
border-radius: 2px;
- color: #4284f5;
- font-size: 14px;
+ font-size: $font-size-normal;
min-width: 280px;
display: block;
align-items: flex-start;
- .hi-icon__title {
+ &__title {
display: flex;
- font-size: 14px;
+ font-size: $font-size-normal;
align-items: center;
- line-height: 22px;
+ line-height: $line-height-size-normal;
.hi-icon {
- font-size: 16px;
+ height: 16px;
+ width: 16px;
margin-right: 8px;
}
}
- .text-message {
+ &__content {
margin: 2px 24px 0 24px;
font-weight: 400;
- font-size: 12px;
- line-height: 20px;
- color: #666;
+ font-size: $font-size-small;
+ line-height: $line-height-size-small;
+ color: use-color('gray-80');
}
- .close-btn {
+ &__close-btn {
position: absolute;
top: 12px;
right: 12px;
cursor: pointer;
- height: 16px;
- line-height: 16px;
-
- .hi-icon {
- font-size: 16px;
- color: #999;
- }
- }
-
- &.error {
- background: #fceded;
- border: 1px solid #f7b9b9;
- color: #eb5252;
-
- .icon-contain {
- color: #eb5252;
- }
- }
-
- &.success {
- background: #e8f6ee;
- border: 1px solid #a4dbba;
- color: #1da653;
-
- .icon-contain {
- color: #1da653;
- }
- }
-
- &.warning {
- background: #fbf5e6;
- border: 1px solid #f3d79d;
- color: #e19d0c;
-
- .icon-contain {
- color: #e19d0c;
- }
+ color: use-color('gray-70');
}
- &.noTitle {
- .text-contain {
- .text-message {
- font-size: 14px;
- }
- }
- }
-}
-
-@each $key, $value in $palette-primary {
- .hi-alert.theme__#{$key} {
- &.info {
+ @each $key, $value in $color-map {
+ &--#{$key} {
+ background-color: use-color(#{$key}-20);
color: $value;
- background-color:
- rgba(
- map-get(get-palette(get-color($palette-primary, $key)), '50'),
- 0.1
- );
- border:
- 1px
- solid
- map-get(get-palette(get-color($palette-primary, $key)), '20');
+ border: 1px solid use-color(#{$key}-40);
}
}
}
diff --git a/components/badge/Badge.js b/components/badge/Badge.js
index 224f8c334..73dce6963 100755
--- a/components/badge/Badge.js
+++ b/components/badge/Badge.js
@@ -1,6 +1,5 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
-import classNames from 'classnames'
import './style/index'
class Badge extends Component {
@@ -23,17 +22,18 @@ class Badge extends Component {
render () {
const { content, prefixCls, max, type, visible, style } = this.props
- const eleClass = classNames(`${prefixCls}-base`)
+ const badage =
+ type === 'dot' ? (
+
+ ) : (
+
+ {typeof content === 'number' ? (content > max ? max + '+' : content) : content}
+
+ )
return (
- {this.props.title}
}
+
+
- {this.props.content && {this.props.content}
}
- {this.props.closeable && (
-
-
-
- )}
+ {content && {content}
}
+ {closeable &&
+
+export default Button
diff --git a/components/button/style/index.scss b/components/button/style/index.scss
index 0eca772c7..e599ce9cf 100644
--- a/components/button/style/index.scss
+++ b/components/button/style/index.scss
@@ -1,102 +1,110 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
// Render flat style button
@mixin render-flat-button($themeColor) {
- $themePalette: get-palette($themeColor) !default;
+ $statusColor: use-color($themeColor);
- background-color: $themeColor;
- color: $white;
+ @if not ($themeColor = 'primary') {
+ $statusColor: get-color($palette-secondary, $themeColor);
+ }
+
+ background-color: $statusColor;
+ color: use-color('white');
&:not(.hi-btn--disabled):focus {
- box-shadow: 0 0 0 2px rgba($themeColor, 0.25);
+ box-shadow: 0 0 0 2px use-color(#{$themeColor}-30);
}
&:not(.hi-btn--disabled):hover {
- background-color: map-get($themePalette, '60');
- color: $white;
+ background-color: use-color(#{$themeColor}-60);
+ color: use-color('white');
}
&:not(.hi-btn--disabled):active {
- background-color: map-get($themePalette, '80');
- color: $white;
+ background-color: use-color(#{$themeColor}-70);
+ color: use-color('white');
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
&:not(.hi-btn--loading) {
- background-color: rgba($themeColor, 0.2);
- color: $white;
+ background-color: use-color(#{$themeColor}-30);
+ color: use-color('white');
}
}
// Make a button look and behave like a link
&.hi-btn--appearance--link {
- color: $themeColor;
+ color: $statusColor;
&:not(.hi-btn--disabled):hover {
- color: map-get($themePalette, '70');
+ color: use-color(#{$themeColor}-70);
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
- color: $themeColor;
+ color: $statusColor;
opacity: 0.54;
}
}
}
// Render line style button
-@mixin render-line-button($themeColor) {
- $themePalette: get-palette($themeColor) !default;
+@mixin render-line-button($themeColor: 'primary') {
+ $statusColor: use-color($themeColor);
+
+ @if not ($themeColor = 'primary') {
+ $statusColor: get-color($palette-secondary, $themeColor);
+ }
- background-color: rgba($themeColor, 0.1);
- border-color: rgba($themeColor, 0.4);
- color: $themeColor;
+ background-color: use-color(#{$themeColor}-20);
+ border-color: use-color(#{$themeColor}-40);
+ color: $statusColor;
&:not(.hi-btn--disabled):focus {
- box-shadow: 0 0 0 2px rgba($themeColor, 0.25);
+ box-shadow: 0 0 0 2px use-color(#{$themeColor}-30);
}
&:not(.hi-btn--disabled):hover {
- border-color: rgba($themeColor, 0.8);
- color: $themeColor;
+ border-color: rgba($statusColor, 0.8);
+ color: $statusColor;
}
&:not(.hi-btn--disabled):active {
- background-color: rgba($themeColor, 0.15);
- color: $themeColor;
+ background-color: rgba($statusColor, 0.15);
+ color: $statusColor;
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
&:not(.hi-btn--loading) {
- border-color: rgba($themeColor, 0.2);
- color: rgba($themeColor, 0.3);
+ border-color: use-color(#{$themeColor}-30);
+ color: use-color(#{$themeColor}-40);
}
}
// Make a button look and behave like a link
&.hi-btn--appearance--link {
- color: $themeColor;
+ color: $statusColor;
&:not(.hi-btn--disabled):hover {
- color: map-get(get-palette($themeColor), '70');
+ color: use-color(#{$themeColor}-50);
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
background-color: transparent;
border-color: transparent;
- color: $themeColor;
+ color: $statusColor;
opacity: 0.54;
}
}
}
// Define component colors
-@mixin btn-theme-styles($themeColor: get-color($palette-primary, 'hiui-blue')) {
+@mixin btn-theme-styles($themeColor: 'primary') {
& {
// Types
&--type--primary {
@@ -109,7 +117,7 @@
&--type--default {
&:not(.hi-btn--disabled):focus {
- box-shadow: 0 0 0 2px rgba($themeColor, 0.25);
+ box-shadow: 0 0 0 2px use-color(#{$themeColor}-30);
}
}
}
@@ -201,42 +209,42 @@
// Common Styles
&--type--default,
&--type--info {
- background-color: $white;
- border-color: $gray;
- color: $black;
+ background-color: use-color('white');
+ border-color: use-color('gray-30');
+ color: use-color('black');
&:not(.hi-btn--disabled):hover {
- border-color: $gray-dark;
- color: $black;
+ border-color: use-color('gray-50');
+ color: use-color('black');
}
&:not(.hi-btn--disabled):active {
- background-color: $gray-lighter;
- color: $black;
+ background-color: use-color('gray-20');
+ color: use-color('black');
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
- background-color: $gray-lighter;
- border-color: rgba($black, 0.1);
- color: $gray;
+ background-color: use-color('gray-20');
+ border-color: use-color('gray-30');
+ color: use-color('gray-50');
}
// Make a button look and behave like a link
&.hi-btn--appearance--link {
&:not(.hi-btn--disabled):hover {
- color: map-get(get-palette($black), '70');
+ color: use-color('gray-70');
}
&:not(.hi-btn--disabled):active {
- color: $black;
+ color: use-color('black');
}
// Status: disabled
&.hi-btn--disabled,
&[disabled] {
- color: $black;
+ color: use-color('black');
opacity: 0.54;
}
}
@@ -244,9 +252,7 @@
@each $key in 'success', 'danger', 'warning' {
&--type--#{$key} {
- $status-color: map-get(get-palette(get-color($palette-secondary, $key)), '50');
-
- @include render-line-button($status-color);
+ @include render-line-button($key);
}
}
@@ -261,7 +267,7 @@
left: -1px;
right: -1px;
content: '';
- background-color: $white;
+ background-color: use-color('white');
cursor: default;
opacity: 0.4;
}
@@ -300,12 +306,6 @@
}
}
-@each $key, $value in $theme-colors {
- .theme__#{$key}.hi-btn {
- @include btn-theme-styles($value);
- }
-}
-
// Button Group
.hi-btn-group {
display: inline-block;
diff --git a/components/card/CoverCard.jsx b/components/card/CoverCard.jsx
new file mode 100644
index 000000000..68dd76a0a
--- /dev/null
+++ b/components/card/CoverCard.jsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const CoverCard = ({ cover, coverUrl, content, size, title, style, className, hoverable }) => {
+ return (
+ {
+}
+export default Card
diff --git a/components/card/index.js b/components/card/index.js
index f40879fac..332c5ac0b 100644
--- a/components/card/index.js
+++ b/components/card/index.js
@@ -1,128 +1,60 @@
-import React, { Component } from 'react'
-import PropTypes from 'prop-types'
-import classNames from 'classnames'
+import React from 'react'
import './style/index'
-import Provider from '../context'
-class Card extends Component {
- constructor (props) {
- super(props)
- this.state = {
- extraShow: props.extraShow === 'stay' && props.extraType === 'default'
- }
- }
- render () {
- const {
- style,
- size,
- hoverable,
- title,
- extra,
- cover,
- coverUrl,
- description,
- content,
- children,
- disabled,
- extraShow,
- extraType,
- type,
- theme
- } = this.props
- const cls = classNames(
- 'hi-card',
- `theme__${theme}`,
- hoverable && 'hi-card--hover',
- size && `hi-card--${size === 'default' ? 'middle' : size}`,
- disabled && 'hi-card--disabled',
- !cover && !coverUrl && type !== 'simple' && 'hi-card--padding',
- type === 'simple' && `hi-card--simple-${size === 'default' ? 'middle' : size}`
- )
- const headerCls = classNames('hi-card__header', !title && extra && 'hi-card__header--onlyextra')
- const coverCls = classNames(
- 'hi-card__content',
- (cover || coverUrl) && 'hi-card__content--cover'
- )
- const extraCls = classNames('hi-card__extra', !this.state.extraShow && 'hi-card__extra--hide')
- const header = (title || extra) && (
-
- {header}
-
+const Card = ({
+ style,
+ className,
+ size,
+ hoverable,
+ title,
+ extra,
+ cover,
+ coverUrl,
+ content,
+ children,
+ showHeaderDivider,
+ type
+}) => {
+ if (cover || coverUrl) {
+ return (
+
+ {children}
+
)
- let coverDom = null
- if (cover || coverUrl) {
- coverDom = (
-
- {cover && React.cloneElement(cover, { style: { width: '100%' } })}
- {coverUrl && 
}
-
- )
- }
- if (type === 'simple') {
- body =
+ {children}
+
+ )
+ } else {
return (
-
+export default Carousel
diff --git a/components/carousel/index.js b/components/carousel/index.js
index 4f69a28a2..a1c52e777 100644
--- a/components/carousel/index.js
+++ b/components/carousel/index.js
@@ -6,45 +6,48 @@ import './style/index'
// const url = 'http://i1.mifile.cn/f/i/hiui/docs/'
class Carousel extends Component {
- constructor (props) {
+ constructor(props) {
super(props)
this.rootRef = React.createRef()
const defaultActive = props.defaultActive
this.state = {
rootWidth: 0,
showArrow: false,
- active: (defaultActive >= props.children.length || defaultActive < 0) ? 0 : defaultActive
+ active: defaultActive >= props.children.length || defaultActive < 0 ? 0 : defaultActive
}
this.timer = null
}
- componentDidMount () {
- this.setState({
- rootWidth: this.rootRef.current.clientWidth
- }, () => {
- if (this.props.duration) {
- this.autoPage()
+ componentDidMount() {
+ this.setState(
+ {
+ rootWidth: this.rootRef.current.clientWidth
+ },
+ () => {
+ if (this.props.duration) {
+ this.autoPage()
+ }
}
- })
+ )
}
- componentWillUnmount () {
+ componentWillUnmount() {
this.timer && window.clearInterval(this.timer)
}
- autoPage () {
+ autoPage() {
this.timer = window.setInterval(() => {
this.preNextEvent(1)
}, this.props.duration)
}
- pageEvent (active) {
+ pageEvent(active) {
this.setState({
active
})
}
- preNextEvent (val) {
+ preNextEvent(val) {
let active = this.state.active + val
if (active >= this.props.children.length) {
active = 0
@@ -57,7 +60,7 @@ class Carousel extends Component {
})
}
- mouseEvent (type) {
+ mouseEvent(type) {
let showArrow = true
if (type === 'over') {
this.timer && window.clearInterval(this.timer)
@@ -65,36 +68,34 @@ class Carousel extends Component {
showArrow = false
this.props.duration && this.autoPage()
}
- this.setState({showArrow})
+ this.setState({ showArrow })
}
- render () {
+ render() {
const { rootWidth, active, showArrow } = this.state
const { showDots, showArrows, showPages } = this.props
const children = React.Children.toArray(this.props.children)
const len = children.length || 0
- const arrowCls = classNames(
- 'hi-carousel__arrows',
- showArrow && 'hi-carousel__arrows--show'
- )
- return
{this.props.children}
- {type === 'dot' ? (
-
- ) : (
-
- {typeof content === 'number' ? (content > max ? max + '+' : content) : content}
-
- )}
+ {visible && badage}
)
}
diff --git a/components/badge/style/index.scss b/components/badge/style/index.scss
index a19facc4f..eeef71b08 100755
--- a/components/badge/style/index.scss
+++ b/components/badge/style/index.scss
@@ -1,8 +1,8 @@
+@import '../../core-css/index.scss';
+
.hi-badge {
- &-base {
- display: inline-block;
- position: relative;
- }
+ display: inline-block;
+ position: relative;
&-value {
position: absolute;
@@ -12,12 +12,12 @@
height: 16px;
padding: 0 4px;
min-width: 8px;
- border: 2px solid #fff;
+ border: 2px solid use-color('white');
border-radius: 10px;
line-height: 16px;
- background: #f44141;
- font-size: 12px;
- color: #fff;
+ background: get-color($palette-secondary, 'danger');
+ font-size: $font-size-small;
+ color: use-color('white');
letter-spacing: 0;
text-align: center;
@@ -32,10 +32,9 @@
height: 8px;
top: -5px;
right: -5px;
- background: #f44141;
- border: 1px solid #fff;
+ background: get-color($palette-secondary, 'danger');
+ border: 1px solid use-color('white');
border-radius: 50%;
- font-size: 0;
&.hi-hide {
display: none;
diff --git a/components/breadcrumb/index.js b/components/breadcrumb/index.js
index 9d6121156..b37a095cd 100644
--- a/components/breadcrumb/index.js
+++ b/components/breadcrumb/index.js
@@ -1,24 +1,53 @@
-import React, { Component } from 'react'
+import React from 'react'
import PropTypes from 'prop-types'
+import classNames from 'classnames'
+
import Icon from '../icon'
import Provider from '../context'
import './style/index'
-class Breadcrumb extends Component {
- render () {
- const { separator, data, onClick, theme } = this.props
- return
- {
- data.map((item, index) => {
- return
- { onClick(item.path) }}>{item.icon &&
- }
+
+ )
+ })}
+
+ )
}
Breadcrumb.propTypes = {
diff --git a/components/breadcrumb/style/index.scss b/components/breadcrumb/style/index.scss
index e75ef26e2..fb6537a37 100644
--- a/components/breadcrumb/style/index.scss
+++ b/components/breadcrumb/style/index.scss
@@ -1,16 +1,23 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
.hi-breadcrumb {
- color: #666;
font-size: 12px;
+ ul {
+ margin-top: 0;
+ margin-bottom: 0;
+ padding-left: 0;
+ font-size: 0;
+ }
+
+ li {
+ margin: 0;
+ list-style: none;
+ }
+
&__content {
cursor: pointer;
- &:hover {
- color: #4284f5;
- }
-
.hi-icon {
margin: 0 4px;
}
@@ -18,30 +25,29 @@
&__separator {
margin: 0 8px;
- color: #ccc;
+ color: use-color('gray-30');
}
- &__item:last-child {
- .hi-breadcrumb__content {
- cursor: text;
+ &__item {
+ display: inline-block;
- &:hover {
- color: #666;
- }
+ a {
+ color: use-color('gray-80');
}
- .hi-breadcrumb__separator {
- display: none;
+ .hi-breadcrumb__content:hover {
+ color: use-color('primary');
}
}
-}
-@each $key, $value in $palette-primary {
- .hi-breadcrumb.theme__#{$key} {
+ &__item:last-child {
.hi-breadcrumb__content {
- &:hover {
- color: $value;
- }
+ cursor: text;
+ color: use-color('gray-80');
+ }
+
+ .hi-breadcrumb__separator {
+ display: none;
}
}
}
diff --git a/components/button/index.d.ts b/components/button/index.d.ts
new file mode 100644
index 000000000..6a41363d3
--- /dev/null
+++ b/components/button/index.d.ts
@@ -0,0 +1,15 @@
+interface ButtonProps {
+ type?: 'primary' | 'line' | 'success' | 'danger' | 'default' | 'warning'
+ size?: 'large' | 'small' | 'normal' | 'default'
+ appearance?: 'button' | 'link'
+ className?: string
+ style?: object
+ disabled?: boolean
+ href?: string
+ loading?: boolean
+ target?: '_self' | '_blank' | '_parent' | '_top'
+ icon?: string
+ onClick?: () => void
+}
+declare const Button: React.ComponentType-
+ {data.map((item, index) => {
+ return (
+
-
+ {item.path && index !== data.length - 1 ? (
+ {
+ onClick(item, index)
+ }}
+ className={classNames('hi-breadcrumb__content', {
+ 'hi-breadcrumb__content__active': index === data.length - 1
+ })}
+ >
+ {item.icon &&
} + {item.content} + + ) : ( + { + onClick(item, index) + }} + > + {item.icon && } + {item.content} + + )} + {separator} -
+ {coverUrl && }
+ {cover}
+
+ )
+}
+
+export default CoverCard
diff --git a/components/card/NormalCard.jsx b/components/card/NormalCard.jsx
new file mode 100644
index 000000000..be904c7b8
--- /dev/null
+++ b/components/card/NormalCard.jsx
@@ -0,0 +1,24 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const NormalCard = ({ children, size, title, extra, showHeaderDivider, style, className, hoverable }) => {
+ return (
+
+ {title &&
+ {title}
}
+ {content}
+
+ {(title || extra) && (
+
+ )
+}
+
+export default NormalCard
diff --git a/components/card/SimpleCard.jsx b/components/card/SimpleCard.jsx
new file mode 100644
index 000000000..17e137341
--- /dev/null
+++ b/components/card/SimpleCard.jsx
@@ -0,0 +1,18 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const SimpleCard = ({ children, size, style, className, hoverable }) => {
+ return (
+
+ {title}
+ {extra}
+
+ )}
+ {children}
+
+ {children}
+
+ )
+}
+
+export default SimpleCard
diff --git a/components/card/index.d.ts b/components/card/index.d.ts
new file mode 100644
index 000000000..253ea9fe3
--- /dev/null
+++ b/components/card/index.d.ts
@@ -0,0 +1,13 @@
+interface Props {
+ title?: string | JSX.Element
+ size?: 'small' | 'default' | 'large'
+ type?: 'simple' | 'default'
+ hoverable?: boolean
+ extra?: JSX.Element
+ extraType?: 'default' | 'hover'
+ coverUrl?: string
+ content?: string | JSX.Element
+}
+declare class Card extends React.Component
-
- )
+import SimpleCard from './SimpleCard'
+import NormalCard from './NormalCard'
+import CoverCard from './CoverCard'
- let body = (
- {title}
- {extra && {extra}
}
- {children}
-
- {header}
- {content || description}
-
- {children}
- coverDom = null
- }
+ }
+ if (type === 'simple') {
+ return (
+ {
- (extraShow === 'hover' || extraType === 'hover') &&
- this.setState({
- extraShow: true
- })
- }}
- onMouseLeave={() => {
- (extraShow === 'hover' || extraType === 'hover') &&
- this.setState({
- extraShow: false
- })
- }}
+ className={className}
+ showHeaderDivider={showHeaderDivider}
+ hoverable={hoverable}
>
- {coverDom || body}
-
+ {children}
+
)
}
}
-Card.defaultProps = {
- hoverable: false,
- title: '',
- extra: '',
- extraShow: 'stay',
- extraType: 'default'
-}
-Card.propTypes = {
- // 支持三种宽度预设值 small -> 276px middle -> 376px large -> 576px，如果传入 style 则忽略该值，如果缺省 style 及 size 则默认100%
- size: PropTypes.oneOf(['small', 'default', 'middle', 'large']),
- // 一种简单的小卡片
- type: PropTypes.oneOf(['simple', 'default']),
- style: PropTypes.object,
- // 鼠标移入是否显示悬停态（浮起）
- hoverable: PropTypes.bool,
- // 卡片标题
- title: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
- // 扩展工具（出现在卡片右上角）
- extra: PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.array]),
- // 封面图（图片卡片） 含有 cover 属性时，title 将会做为图片下文的 title，而不会出现在卡片左上角
- cover: PropTypes.element,
- // 用于图片卡片，做为描述
- description: PropTypes.oneOfType([PropTypes.element, PropTypes.string]), // TODO: 废弃，使用 content
- content: PropTypes.oneOfType([PropTypes.element, PropTypes.string]),
- disabled: PropTypes.bool, // TODO: 废弃
- // 扩展按钮显示模式
- extraShow: PropTypes.oneOf(['stay', 'hover']), // TODO: 废弃，使用 extraType
- extraType: PropTypes.oneOf(['default', 'hover'])
-}
-export default Provider(Card)
-export {Card}
+
+export default Card
+export { Card }
diff --git a/components/card/style/index.scss b/components/card/style/index.scss
index 5697f6c7a..248ba1cf4 100644
--- a/components/card/style/index.scss
+++ b/components/card/style/index.scss
@@ -1,107 +1,127 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
.hi-card {
border-radius: 2px;
- border: 1px solid rgba(231, 231, 231, 1);
+ border: 1px solid use-color('gray-20');
box-sizing: border-box;
- background: #fff;
+ background: use-color('white');
- &--padding {
- padding: 24px;
- }
+ &--simple {
+ height: 40px;
+ overflow: hidden;
+ padding: 10px 12px;
+ display: flex;
+ align-items: center;
- &--hover:not(.hi-card--disabled) {
- &:hover {
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.08);
- // cursor: pointer;
+ &.hi-card--small {
+ width: 136px;
}
- }
-
- &--disabled {
- background: rgba(246, 246, 246, 1);
- color: rgba(204, 204, 204, 1);
- cursor: not-allowed;
- user-select: none;
- }
- &__header {
- height: 24px;
- line-height: 24px;
- display: flex;
- padding-bottom: 4px;
- justify-content: space-between;
+ &.hi-card--default {
+ width: 156px;
+ }
- &--onlyextra {
- justify-content: flex-end;
+ &.hi-card--large {
+ width: 176px;
}
}
- &__title {
- font-size: 16px;
- font-weight: 600;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
+ &--cover {
+ // 解决 img 底部空白问题
+ > img {
+ display: block;
+ width: 100%;
+ border-radius: 2px 2px 0 0;
+ }
+
+ .hi-card__title {
+ margin-bottom: 4px;
+ font-size: $font-size-large;
+ font-weight: $font-weight-bold;
+ }
- &__content {
- &--cover {
+ .hi-card__content {
padding: 16px;
}
- &--simple {
- height: 40px;
- line-height: 40px;
- padding: 0 12px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ &.hi-card--small {
+ width: 276px;
}
- }
- &__extra {
- cursor: pointer;
- color: #4284f5;
- font-size: 14px;
+ &.hi-card--default {
+ width: 376px;
+ }
- &--hide {
- display: none;
+ &.hi-card--large {
+ width: 576px;
}
}
- &--middle {
- width: 376px;
- }
+ &--standard {
+ .hi-card__content {
+ padding: 24px;
+ }
- &--small {
- width: 276px;
- }
+ .hi-card__title {
+ height: 48px;
+ padding: 0 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid use-color('gray-20');
+ font-size: $font-size-large;
+ font-weight: $font-weight-bold;
+ }
- &--large {
- width: 576px;
- }
+ &.hi-card--small {
+ width: 276px;
+ min-height: 138px;
+ }
- &--simple-small {
- width: 136px;
- }
+ &.hi-card--default {
+ width: 376px;
+ min-height: 188px;
+ }
- &--simple-middle {
- width: 156px;
+ &.hi-card--large {
+ width: 576px;
+ min-height: 196px;
+ }
}
- &--simple-large {
- width: 176px;
- }
-}
+ &--normal {
+ padding: 24px;
-@each $key, $value in $palette-primary {
- .theme__#{$key}.hi-card {
- &__extra {
- color: $value;
+ .hi-card__title {
+ font-size: $font-size-large;
+ font-weight: $font-weight-bold;
+ margin-bottom: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
}
- .hi-icon {
- color: $value;
+ &.hi-card--small {
+ width: 276px;
+ min-height: 138px;
+ }
+
+ &.hi-card--default {
+ width: 376px;
+ min-height: 188px;
+ }
+
+ &.hi-card--large {
+ width: 576px;
+ min-height: 196px;
+ }
+ }
+
+ &--hoverable {
+ transition: box-shadow 0.3s;
+
+ &:hover {
+ box-shadow: 0 2px 8px 0 use-color('gray-10');
}
}
}
diff --git a/components/carousel/index.d.ts b/components/carousel/index.d.ts
new file mode 100644
index 000000000..b07d07d66
--- /dev/null
+++ b/components/carousel/index.d.ts
@@ -0,0 +1,10 @@
+interface Props {
+ duration?: number
+ showDots?: boolean
+ showArrows?: boolean
+ defaultActive?: number
+ showPages?: boolean
+ children: JSX.Element
+}
+declare const Carousel: React.ComponentType
+ const arrowCls = classNames('hi-carousel__arrows', showArrow && 'hi-carousel__arrows--show')
+ return (
+ )
}
}
diff --git a/components/cascader/Cascader.js b/components/cascader/Cascader.js
index eade53f80..8a36eb9e3 100644
--- a/components/cascader/Cascader.js
+++ b/components/cascader/Cascader.js
@@ -1,219 +1,176 @@
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
+import React, { useRef, useState, useCallback, useEffect } from 'react'
+
import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import debounce from 'lodash/debounce'
+
import Popper from '../popper'
-import isEqual from 'lodash/isEqual'
-import shallowequal from 'shallowequal'
+
import Menu from './Menu'
import Provider from '../context'
-class Cascader extends Component {
- static propTypes = {
- data: PropTypes.array,
- value: PropTypes.oneOfType([
- PropTypes.array
- ]),
- fieldNames: PropTypes.object,
- searchable: PropTypes.bool,
- clearable: PropTypes.bool,
- disabled: PropTypes.bool,
- changeOnSelect: PropTypes.bool,
- className: PropTypes.string,
- placeholder: PropTypes.string,
- emptyContent: PropTypes.string,
- style: PropTypes.object,
- onActiveItemChange: PropTypes.func,
- onChange: PropTypes.func,
- displayRender: PropTypes.func,
- filterOption: PropTypes.func
- }
-
- static defaultProps = {
- fieldNames: {},
- data: [],
- value: [],
- searchable: false,
- clearable: true,
- disabled: false,
- changeOnSelect: false,
- onActiveItemChange: () => {},
- onChange: () => {},
- trigger: 'click'
- }
-
- constructor (props) {
- super(props)
- const cascaderValue = this.props.value || []
- const cacheValue = this.props.value || []
- const cascaderLabel = this.getCascaderLabel(cascaderValue)
- this.hiCascader = React.createRef()
- this.debouncedKeywordChange = debounce(this.onKeywordChange.bind(this), 300)
- this.clickOutsideHandel = this.clickOutside.bind(this)
- this.state = {
- filterOptions: false,
- cacheValue,
- cascaderValue,
- cascaderLabel,
- popperShow: false,
- keyword: ''
- }
- }
-
- getChildContext () {
- return {
- component: this
- }
- }
- componentWillReceiveProps (nextProps) {
- if (!shallowequal(nextProps.value, this.props.value) || !isEqual(nextProps.data, this.props.data)) {
- const cascaderLabel = this.getCascaderLabel(nextProps.value, nextProps.data)
- this.setState({
- cacheValue: nextProps.value || [], // 缓存原始value，用户可能点击option但是没选中，用于恢复初始value
- cascaderLabel
- })
- }
- }
- componentDidMount () {
- window.addEventListener('click', this.clickOutsideHandel)
- }
-
- componentWillUnmount () {
- window.removeEventListener('click', this.clickOutsideHandel)
- }
+const noop = () => {}
+
+const Cascader = (props) => {
+ const {
+ className,
+ disabled = false,
+ searchable = false,
+ clearable = true,
+ style,
+ theme,
+ value,
+ defaultValue,
+ displayRender,
+ fieldNames = {},
+ filterOption,
+ changeOnSelect = false,
+ localeDatas,
+ onChange = noop,
+ onActiveItemChange = noop
+ } = props
+ const data = props.data || props.options // 兼容1.x API 2.x 改为data
+ const emptyContent = props.emptyContent || props.noFoundTip // 兼容1.x API 2.x改为 emptyContent
+ const expandTrigger = props.expandTrigger || props.trigger || 'click' // 兼容2.x API 1.x改为 expandTrigger
+
+ const getLabelKey = useCallback(() => {
+ return fieldNames.label || 'content'
+ }, [])
+
+ const getValueKey = useCallback(() => {
+ return fieldNames.value || 'id'
+ }, [])
+
+ const getChildrenKey = useCallback(() => {
+ return fieldNames.children || 'children'
+ }, [])
+
+ const getCascaderLabel = useCallback(
+ (values, dataList) => {
+ if (displayRender) {
+ return displayRender(values)
+ }
- clickOutside (e) {
- if (
- (ReactDOM.findDOMNode(this.inputContainer) && ReactDOM.findDOMNode(this.inputContainer).contains(e.target)) ||
- (ReactDOM.findDOMNode(this.menuNode) && ReactDOM.findDOMNode(this.menuNode).contains(e.target))
- ) {
- return
+ if (!values || values.length === 0) {
+ return ''
+ } else {
+ const labels = []
+ let index = 0
+ let _options = dataList || data
+ const labelKey = getLabelKey()
+ const valueKey = getValueKey()
+ const childrenKey = getChildrenKey()
+
+ while (_options && _options.length > 0 && labels.length <= values.length) {
+ const value = values[index]
+ index++
+ _options.every((option) => {
+ if (option[valueKey] === value) {
+ labels.push(option[labelKey])
+ _options = option[childrenKey]
+ return false
+ } else {
+ _options = []
+ return true
+ }
+ })
+ }
+ return labels.join(' / ')
+ }
+ },
+ [data]
+ )
+ const [filterOptions, setFilterOptions] = useState(false)
+ // 缓存原始value，用户可能点击option但是没选中，用于恢复初始value
+ const [cacheValue, setCacheValue] = useState(value || defaultValue || [])
+ const [cascaderValue, setCascaderValue] = useState(value || defaultValue || [])
+ const [cascaderLabel, setCascaderLabel] = useState(getCascaderLabel(value || defaultValue || []))
+
+ const [popperShow, setPopperShow] = useState(false)
+ const [keyword, setKeyword] = useState('')
+
+ const hiCascader = useRef()
+ const inputContainer = useRef()
+ const inputRef = useRef()
+
+ // 每次值被改变重置缓存值、重置label 展示
+ useEffect(() => {
+ if (value !== undefined) {
+ setCacheValue(value)
}
- this.hidePopper()
- }
+ }, [value])
- hidePopper (e) {
- this.setState({
- popperShow: false
- })
- }
+ useEffect(() => {
+ setCascaderLabel(getCascaderLabel(cacheValue))
+ setCascaderValue(cacheValue)
+ }, [cacheValue])
- showPopper () {
- this.setState({
- keyword: '',
- filterOptions: false,
- cascaderValue: this.state.cacheValue,
- popperShow: true
- })
- this.inputRef.focus()
+ const extraClass = {
+ 'hi-cascader--disabled': disabled,
+ 'hi-cascader--focused': popperShow,
+ 'hi-cascader--clearable': clearable
}
- getCascaderLabel (values, data) {
- if (this.props.displayRender) {
- return this.props.displayRender(values)
- }
- if (!values || values.length === 0) {
- return ''
- } else {
- let labels = []
- let index = 0
- let _options = data || this.props.data
- const labelKey = this.labelKey()
- const valueKey = this.valueKey()
- const childrenKey = this.childrenKey()
-
- while (_options && _options.length > 0 && labels.length <= values.length) {
- let value = values[index]
- index++
- _options.every(option => {
- if (option[valueKey] === value) {
- labels.push(option[labelKey])
- _options = option[childrenKey]
- return false
- } else {
- _options = []
- return true
+ const onChangeValue = useCallback(
+ (values, hasChildren) => {
+ setFilterOptions(false)
+ setKeyword('')
+ setCascaderValue(values)
+ if (expandTrigger === 'click') {
+ if (changeOnSelect || !hasChildren) {
+ if (value === undefined) {
+ setCacheValue(values)
}
- })
- }
- return labels.join(' / ')
- }
- }
-
- clearValue (e) {
- e.stopPropagation()
- this.onChangeValue([], false)
- }
-
- onChangeValue = (value, hasChildren) => {
- const {
- onChange,
- onActiveItemChange,
- changeOnSelect
- } = this.props
- this.setState({
- filterOptions: false,
- keyword: '',
- cascaderValue: value
- }, () => {
- if (changeOnSelect || !hasChildren) {
- this.setState({
- cacheValue: value,
- cascaderLabel: this.getCascaderLabel(value)
- }, () => onChange(value))
- }
- if (hasChildren) {
- onActiveItemChange(value)
+ onChange(values)
+ }
+ if (hasChildren) {
+ onActiveItemChange(values)
+ } else {
+ setPopperShow(false)
+ }
} else {
- this.hidePopper()
+ // hover
+ if (changeOnSelect || !hasChildren) {
+ if (value === undefined) {
+ setCacheValue(values)
+ }
+ onChange(values)
+ setPopperShow(false)
+ }
}
- })
- }
-
- onHoverSelect = (value) => {
- this.setState({
- filterOptions: false,
- keyword: '',
- cascaderValue: value
- })
- }
-
- onHoverClick = (value, hasChildren) => {
- const { onChange, changeOnSelect } = this.props
- if (changeOnSelect || !hasChildren) {
- this.setState(
- {
- cacheValue: value,
- cascaderLabel: this.getCascaderLabel(value)
- },
- () => onChange(value)
- )
- this.hidePopper()
+ },
+ [changeOnSelect, expandTrigger]
+ )
+
+ const clearValue = useCallback(
+ (e) => {
+ e.stopPropagation()
+ onChangeValue([], false)
+ },
+ [onChangeValue]
+ )
+
+ const onHover = useCallback((value, hasChildren) => {
+ setFilterOptions(false)
+ setKeyword('')
+ setCascaderValue(value)
+ if (hasChildren) {
+ onActiveItemChange(value)
}
- }
+ }, [])
- onKeywordChange () {
- const {
- data
- } = this.props
- const {
- keyword
- } = this.state
+ const onKeywordChange = useCallback(() => {
if (!keyword) {
- this.setState({
- filterOptions: false
- })
+ setFilterOptions(false)
+ setPopperShow(false)
return
}
- const labelKey = this.labelKey()
- const valueKey = this.valueKey()
- const childrenKey = this.childrenKey()
let filterOptions = []
- const initMatchOptions = {options: [], matchCount: 0}
- const checkOptions = (options, match) => {
- options.map(option => {
- let label = option[labelKey]
+ const initMatchOptions = { options: [], matchCount: 0 }
+ const labelKey = getLabelKey()
+ const valueKey = getValueKey()
+ const childrenKey = getChildrenKey()
+ const _checkOptions = (options, match) => {
+ options.map((option) => {
+ const label = option[labelKey]
const value = option[valueKey]
const children = option[childrenKey]
if (label.toString().includes(keyword) || value.toString().includes(keyword)) {
@@ -227,7 +184,7 @@ class Cascader extends Component {
})
if (children && children.length > 0) {
- checkOptions(children, match)
+ _checkOptions(children, match)
} else {
if (match.matchCount > 0) {
filterOptions.push(match.options.slice())
@@ -241,211 +198,229 @@ class Cascader extends Component {
})
}
- checkOptions(data, initMatchOptions)
- filterOptions = this.formatFilterOptions(filterOptions, keyword)
- this.setState({
- filterOptions
- })
- }
-
- localeDatasProps (key) {
- const {
- localeDatas
- } = this.props
+ _checkOptions(data, initMatchOptions)
- if (this.props[key]) {
- return this.props[key]
- } else {
- return localeDatas.cascader[key]
- }
- }
+ const ids = getSearchId(filterOptions, keyword)
- formatFilterOptions (filterOptions, keyword) {
- const {
- filterOption: filterFunc
- } = this.props
- const jointOptions = []
+ setCascaderValue(ids)
+ filterOptions = formatFilterOptions(data, keyword)
+ setPopperShow(true)
+ }, [keyword, data])
+ // 获取默认选中的最近的id
+ const getSearchId = useCallback((filterOptions, keyword) => {
+ const filterFunc = filterOption
const levelItems = []
const levelItemsObj = {}
- const labelKey = this.labelKey()
- const valueKey = this.valueKey()
- const emptyContent = this.localeDatasProps('noFoundTip')
+ const labelKey = getLabelKey()
+ const valueKey = getValueKey()
if (filterOptions.length === 0) {
- return [{
- [labelKey]: emptyContent,
- [valueKey]: '',
- disabled: true
- }]
+ return []
} else {
- filterOptions.map(options => {
- let jointOption = {
+ filterOptions.map((options) => {
+ const jointOption = {
jointOption: true,
[labelKey]: [],
[valueKey]: []
}
options.map((option, index) => {
- let levelItem = {
- jointOption: true,
- [labelKey]: [],
- [valueKey]: []
+ const levelItem = {
+ [valueKey]: ''
}
- if (index !== 0) {
- jointOption[labelKey].push(/)
- }
- levelItem[labelKey] = jointOption[labelKey].concat(this.hightlightKeyword(option[labelKey], keyword, index + '-' + jointOption[labelKey].length))
+
levelItem[valueKey] = jointOption[valueKey].concat(option[valueKey])
- jointOption[labelKey].push(this.hightlightKeyword(option[labelKey], keyword, index))
jointOption[valueKey].push(option[valueKey])
option.disabled && (jointOption.disabled = option.disabled)
option.disabled && (levelItem.disabled = option.disabled)
+
if (!levelItemsObj[levelItem[valueKey]]) {
levelItemsObj[levelItem[valueKey]] = levelItem[valueKey]
if (filterFunc) {
- if (filterFunc(keyword, option) && (levelItem[valueKey].toString().includes(keyword) || option[labelKey].toString().includes(keyword))) levelItems.push(levelItem)
+ if (
+ filterFunc(keyword, option) &&
+ (levelItem[valueKey].toString().includes(keyword) || option[labelKey].toString().includes(keyword))
+ ) {
+ levelItems.push(levelItem)
+ }
} else {
- if (levelItem[valueKey].toString().includes(keyword) || option[labelKey].toString().includes(keyword)) levelItems.push(levelItem)
+ if (option[labelKey].toString().includes(keyword)) {
+ levelItems.push(levelItem)
+ }
}
}
})
-
- jointOptions.push(jointOption)
})
}
if (levelItems.length === 0) {
- return [{
- [labelKey]: emptyContent,
- [valueKey]: '',
- disabled: true
- }]
+ return []
}
- return levelItems
- }
- hightlightKeyword (text, keyword, uniqueKey) {
+ const ids = levelItems.map((item) => item.id)
+ let targetId = ids[0].join(',')
+ for (let i = 1; i < ids.length; i++) {
+ if (ids[i].join(',').includes(targetId)) {
+ targetId = ids[i].join(',')
+ }
+ }
+
+ return targetId.split(',').map((item) => Number(item))
+ }, [])
+
+ // 配置化
+ const localeDatasProps = useCallback((key) => {
+ return props[key] ? props[key] : localeDatas.cascader[key]
+ }, [])
+
+ const formatFilterOptions = useCallback((data, keyword) => {
+ const labelKey = getLabelKey()
+ const valueKey = getValueKey()
+ const childrenKey = getChildrenKey()
+
+ if (data.length === 0) {
+ return []
+ } else {
+ const _changeOptions = (options) => {
+ return options.map((option) => {
+ const label = option[labelKey]
+ const value = option[valueKey]
+ const children = option[childrenKey]
+
+ if (label.toString().includes(keyword) || value.toString().includes(keyword)) {
+ const hightlight = []
+ hightlight.push(hightlightKeyword(label, keyword))
+ option.hightlight = hightlight
+ } else {
+ option.hightlight = null
+ }
+
+ if (children && children.length > 0) {
+ _changeOptions(children)
+ }
+
+ return option
+ })
+ }
+ setFilterOptions(_changeOptions(data, []))
+ return _changeOptions(data)
+ }
+ })
+ const hightlightKeyword = useCallback((text, keyword, uniqueKey) => {
let _keyword = keyword
_keyword = keyword.includes('[') ? _keyword.replace(/\[/gi, '\\[') : _keyword
_keyword = keyword.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword
_keyword = keyword.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword
- let parts = text.split(new RegExp(`(${_keyword})`, 'gi'))
+ const parts = text.split(new RegExp(`(${_keyword})`, 'gi'))
return (
- { parts.map((part, i) =>
-
- { part }
+ {parts.map((part, i) => (
+
+ {part}
- )
- }
+ ))}
)
- }
-
- handleClick (e) {
- if (this.state.popperShow) {
- this.hidePopper()
- return
- }
- // e.stopPropagation()
- if (!this.props.disabled) {
- this.showPopper()
- }
- }
-
- labelKey () {
- return this.props.fieldNames.label || 'content'
- }
-
- valueKey () {
- return this.props.fieldNames.value || 'id'
- }
+ }, [])
+ const handleClick = useCallback(
+ (e) => {
+ if (popperShow) {
+ return
+ }
+ if (!disabled) {
+ if (!searchable) {
+ setKeyword('')
+ setFilterOptions(false)
+ }
- childrenKey () {
- return this.props.fieldNames.children || 'children'
- }
+ if (!searchable || (searchable && cascaderValue.length)) {
+ setPopperShow(true)
+ }
+ if (searchable && keyword) {
+ onKeywordChange()
+ } else {
+ setCascaderValue(cacheValue || [])
+ }
- render () {
- const {
- className,
- data,
- disabled,
- searchable,
- clearable,
- style,
- theme,
- trigger
- } = this.props
- const {
- cascaderValue,
- keyword,
- popperShow,
- filterOptions,
- cascaderLabel
- } = this.state
- const extraClass = {
- 'hi-cascader--disabled': disabled,
- 'hi-cascader--focused': popperShow,
- 'hi-cascader--clearable': clearable
- }
- const expandIcon = popperShow ? 'icon-up' : 'icon-down'
- const placeholder = cascaderLabel || this.localeDatasProps('placeholder')
- return (
-
- {
- children.map((child, index) => {
+
+ {showArrows && (
+
+ {children.map((child, index) => {
return React.cloneElement(child, {
key: index,
style: {
position: 'relative',
- zIndex:active === index ? 2 : 1,
+ zIndex: active === index ? 2 : 1,
opacity: active === index ? 1 : 0,
transition: 'opacity 300ms ease 0s',
left: -(rootWidth * index),
@@ -104,39 +105,35 @@ class Carousel extends Component {
...child.props.style
}
})
- })
- }
-
- {
- showArrows && -
-
-
-
-
- -
-
-
-
-
- {
- children.map((_, index) => {
- const cls = classNames('hi-carousel__dot', active === index && 'hi-carousel__dot--active')
- return
- })
- }
-
- {active} / {len}
+ })}
- }
- -
+
-
+
+
+ -
+
+
+
-
+ {children.map((_, index) => {
+ const cls = classNames('hi-carousel__dot', active === index && 'hi-carousel__dot--active')
+ return
+ })}
+
+
+ {active} / {len}
+
+
+ )}
+
-
+export default Card
diff --git a/components/cascader/index.js b/components/cascader/index.js
index 0909b2af2..5636337cb 100644
--- a/components/cascader/index.js
+++ b/components/cascader/index.js
@@ -1,9 +1,4 @@
import Cascader from './Cascader'
import './style/index'
-import { depreactedPropsCompat } from '../_util'
-export default depreactedPropsCompat([
- ['data', 'options'],
- ['emptyContent', 'noFoundTip'],
- ['fieldNames', 'fieldNames']
-])(Cascader)
+export default Cascader
diff --git a/components/cascader/style/cascader.scss b/components/cascader/style/cascader.scss
index 57f26c941..2aa476777 100644
--- a/components/cascader/style/cascader.scss
+++ b/components/cascader/style/cascader.scss
@@ -1,4 +1,5 @@
@import '@hi-ui/core-css/index.scss';
+
$cascader: 'hi-cascader' !default;
.#{$cascader} {
@@ -21,13 +22,17 @@ $cascader: 'hi-cascader' !default;
&:not(.hi-cascader--disabled) {
&.hi-cascader--clearable:hover {
- .hi-cascader__icon--expand {
+ .hi-cascader__icon--expand.has-value {
display: none;
}
.hi-cascader__icon--clear {
display: block;
- color: #999;
+ color: #bbb;
+
+ &:hover {
+ color: #666;
+ }
}
}
}
@@ -35,7 +40,7 @@ $cascader: 'hi-cascader' !default;
&__input-container {
display: flex;
align-items: center;
- padding: 4px 12px;
+ padding: 5px 12px;
border: 1px solid #d8d8d8;
}
@@ -43,12 +48,16 @@ $cascader: 'hi-cascader' !default;
flex: auto;
font-size: 14px;
cursor: pointer;
- overflow: hidden;
+ overflow: hidden !important;
text-overflow: ellipsis;
white-space: nowrap;
border: none;
outline: none;
box-sizing: border-box;
+
+ &::-webkit-input-placeholder {
+ color: #ccc;
+ }
}
&__icon {
diff --git a/components/cascader/style/menu.scss b/components/cascader/style/menu.scss
index f60f52cda..cddb7c11e 100644
--- a/components/cascader/style/menu.scss
+++ b/components/cascader/style/menu.scss
@@ -1,12 +1,27 @@
@import '@hi-ui/core-css/index.scss';
+$AnimationClassName: 'hi-cascader_transition' !default;
.hi-cascader__popper {
display: flex;
- background-color: #fff;
font-size: 14px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
+.hi-cascader-menuOutter {
+ display: flex;
+
+ &.hi-cascader-menuOutter--empty {
+ height: 233px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #a9abaf;
+ font-size: 14px;
+ background-color: #fff;
+ }
+}
+
.hi-cascader-menu {
height: 180px;
min-width: 110px;
@@ -29,8 +44,9 @@
color: #48576a;
cursor: pointer;
- &.hi-cascader-menu__item-disabled {
- color: #bfcbd9;
+ &.hi-cascader-menu__item-disabled span,
+ &.hi-cascader-menu__item-disabled .hi-cascader-menu__item--label-noHightlight {
+ color: #bfcbd9 !important;
cursor: not-allowed;
}
@@ -39,7 +55,12 @@
}
&.hi-cascader-menu__item-active {
- background-color: #f5f5f5;
+ color: #4284f5;
+ background-color: transparent !important;
+
+ &:hover {
+ background-color: rgba(66, 133, 244, 0.15) !important;
+ }
}
&:hover {
@@ -55,8 +76,27 @@
white-space: nowrap;
}
+ &--isFiltered {
+ > span,
+ i {
+ color: #333;
+ }
+ }
+
+ &--path {
+ font-weight: 600;
+
+ i {
+ color: #48576a;
+ }
+ }
+
&--label-hightlight {
- color: #f5222d;
+ color: #4284f5;
+ }
+
+ &--label-noHightlight {
+ color: #333;
}
&--label-split {
@@ -76,3 +116,21 @@
}
}
}
+
+@keyframes transitionStyle {
+ from {
+ transform: scale(0.9);
+ transform: translate(-6%);
+ opacity: 0;
+ background-color: none;
+ }
+
+ to {
+ opacity: 1;
+ background-color: #fff;
+ }
+}
+
+.#{$AnimationClassName} {
+ animation: transitionStyle 0.3s 1 forwards;
+}
diff --git a/components/charts/hi-echarts-theme-default.json b/components/charts/hi-echarts-theme-default.json
new file mode 100644
index 000000000..d7bce4658
--- /dev/null
+++ b/components/charts/hi-echarts-theme-default.json
@@ -0,0 +1,502 @@
+
+{
+ "color": [
+ "#679DF6",
+ "#6BC9AD",
+ "#C373E4",
+ "#FF845A",
+ "#FFD433",
+ "#FF6F8D",
+ "#A37E61",
+ "#74D0FF",
+ "#57EADF",
+ "#ABE900",
+ "#FFED00",
+ "#316ACA"
+ ],
+ "backgroundColor": "rgba(252,252,252,0)",
+ "textStyle": {},
+ "title": {
+ "textStyle": {
+ "color": "#666666"
+ },
+ "subtextStyle": {
+ "color": "#999999"
+ }
+ },
+ "line": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": "2"
+ }
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "3"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false
+ },
+ "radar": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": "2"
+ }
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "3"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false
+ },
+ "bar": {
+ "itemStyle": {
+ "normal": {
+ "barBorderWidth": 0,
+ "barBorderColor": "#ccc"
+ },
+ "emphasis": {
+ "barBorderWidth": 0,
+ "barBorderColor": "#ccc"
+ }
+ }
+ },
+ "pie": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "scatter": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "boxplot": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "parallel": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "sankey": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "funnel": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "gauge": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ },
+ "emphasis": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ }
+ },
+ "candlestick": {
+ "itemStyle": {
+ "normal": {
+ "color": "#e6a0d2",
+ "color0": "transparent",
+ "borderColor": "#e6a0d2",
+ "borderColor0": "#679DF6",
+ "borderWidth": "2"
+ }
+ }
+ },
+ "graph": {
+ "itemStyle": {
+ "normal": {
+ "borderWidth": 0,
+ "borderColor": "#ccc"
+ }
+ },
+ "lineStyle": {
+ "normal": {
+ "width": "1",
+ "color": "#cccccc"
+ }
+ },
+ "symbolSize": "8",
+ "symbol": "emptyCircle",
+ "smooth": false,
+ "color": [
+ "#679DF6",
+ "#6BC9AD",
+ "#C373E4",
+ "#FF845A",
+ "#FFD433",
+ "#FF6F8D",
+ "#A37E61",
+ "#74D0FF",
+ "#57EADF",
+ "#ABE900",
+ "#FFED00",
+ "#316ACA"
+ ],
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#ffffff"
+ }
+ }
+ }
+ },
+ "map": {
+ "itemStyle": {
+ "normal": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "emphasis": {
+ "areaColor": "rgba(63,177,227,0.25)",
+ "borderColor": "#679DF6",
+ "borderWidth": 1
+ }
+ },
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#ffffff"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#679DF6"
+ }
+ }
+ }
+ },
+ "geo": {
+ "itemStyle": {
+ "normal": {
+ "areaColor": "#eeeeee",
+ "borderColor": "#aaaaaa",
+ "borderWidth": 0.5
+ },
+ "emphasis": {
+ "areaColor": "rgba(63,177,227,0.25)",
+ "borderColor": "#679DF6",
+ "borderWidth": 1
+ }
+ },
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#ffffff"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#679DF6"
+ }
+ }
+ }
+ },
+ "categoryAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": [
+ "#eeeeee"
+ ]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": [
+ "rgba(250,250,250,0.05)",
+ "rgba(200,200,200,0.02)"
+ ]
+ }
+ }
+ },
+ "valueAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": [
+ "#eeeeee"
+ ]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": [
+ "rgba(250,250,250,0.05)",
+ "rgba(200,200,200,0.02)"
+ ]
+ }
+ }
+ },
+ "logAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": [
+ "#eeeeee"
+ ]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": [
+ "rgba(250,250,250,0.05)",
+ "rgba(200,200,200,0.02)"
+ ]
+ }
+ }
+ },
+ "timeAxis": {
+ "axisLine": {
+ "show": true,
+ "lineStyle": {
+ "color": "#cccccc"
+ }
+ },
+ "axisTick": {
+ "show": false,
+ "lineStyle": {
+ "color": "#333"
+ }
+ },
+ "axisLabel": {
+ "show": true,
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "splitLine": {
+ "show": true,
+ "lineStyle": {
+ "color": [
+ "#eeeeee"
+ ]
+ }
+ },
+ "splitArea": {
+ "show": false,
+ "areaStyle": {
+ "color": [
+ "rgba(250,250,250,0.05)",
+ "rgba(200,200,200,0.02)"
+ ]
+ }
+ }
+ },
+ "toolbox": {
+ "iconStyle": {
+ "normal": {
+ "borderColor": "#999999"
+ },
+ "emphasis": {
+ "borderColor": "#666666"
+ }
+ }
+ },
+ "legend": {
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "tooltip": {
+ "axisPointer": {
+ "lineStyle": {
+ "color": "#cccccc",
+ "width": 1
+ },
+ "crossStyle": {
+ "color": "#cccccc",
+ "width": 1
+ }
+ }
+ },
+ "timeline": {
+ "lineStyle": {
+ "color": "#C373E4",
+ "width": 1
+ },
+ "itemStyle": {
+ "normal": {
+ "color": "#C373E4",
+ "borderWidth": 1
+ },
+ "emphasis": {
+ "color": "#C373E4"
+ }
+ },
+ "controlStyle": {
+ "normal": {
+ "color": "#C373E4",
+ "borderColor": "#C373E4",
+ "borderWidth": 0.5
+ },
+ "emphasis": {
+ "color": "#C373E4",
+ "borderColor": "#C373E4",
+ "borderWidth": 0.5
+ }
+ },
+ "checkpointStyle": {
+ "color": "#679DF6",
+ "borderColor": "rgba(63,177,227,0.15)"
+ },
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#C373E4"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#C373E4"
+ }
+ }
+ }
+ },
+ "visualMap": {
+ "color": [
+ "#2a99c9",
+ "#afe8ff"
+ ]
+ },
+ "dataZoom": {
+ "backgroundColor": "rgba(255,255,255,0)",
+ "dataBackgroundColor": "rgba(222,222,222,1)",
+ "fillerColor": "rgba(114,230,212,0.25)",
+ "handleColor": "#cccccc",
+ "handleSize": "100%",
+ "textStyle": {
+ "color": "#999999"
+ }
+ },
+ "markPoint": {
+ "label": {
+ "normal": {
+ "textStyle": {
+ "color": "#ffffff"
+ }
+ },
+ "emphasis": {
+ "textStyle": {
+ "color": "#ffffff"
+ }
+ }
+ }
+ }
+}
diff --git a/components/charts/index.js b/components/charts/index.js
new file mode 100644
index 000000000..8de135f09
--- /dev/null
+++ b/components/charts/index.js
@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react'
+import ReactEcharts from 'echarts-for-react'
+import echarts from 'echarts'
+
+import DefaultTheme from './hi-echarts-theme-default.json'
+
+const Charts = (props) => {
+ useEffect(() => {
+ echarts.registerTheme('default', DefaultTheme)
+ }, [])
+ return ) => void
+}
+interface GroupProps {
+ className?: string
+ placement?: string
+ data: DataItem[] | string[] | number[]
+ defaultValue?: string[] | number[]
+ disabled?: boolean
+ name?: string
+ onChange?: (checkedList: string[] | number[]) => void
+ style?: CSSProperties
+ value?: string[] | number[]
+}
+declare class Group extends React.Component {
+}
+declare class Checkbox extends React.Component {
+ static Group = Group
+}
+export default Checkbox
+
diff --git a/components/checkbox/index.js b/components/checkbox/index.js
index af4dde8e1..31c4be524 100644
--- a/components/checkbox/index.js
+++ b/components/checkbox/index.js
@@ -1,12 +1,16 @@
+import React from 'react'
import Checkbox from './Checkbox'
import CheckboxLegacy from './checkbox-legacy/index'
import Group from './Group'
-import SwitchVersion from '../_util/SwitchVersion'
import './style/index'
-const VGroup = SwitchVersion(Group, undefined)
-const VCheckbox = SwitchVersion(Checkbox, CheckboxLegacy)
+const VCheckbox = ({ legacy, ...props }) => {
+ const WrapperComponent = legacy ? CheckboxLegacy : Checkbox
+ return {
+}
+declare class Collapse extends React.Component {
+ static Panel = Panel
+}
+export default Collapse
diff --git a/components/collapse/index.js b/components/collapse/index.js
index 52df29bb6..d033b6059 100755
--- a/components/collapse/index.js
+++ b/components/collapse/index.js
@@ -1,6 +1,8 @@
import React, { Component, Children } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
+import _ from 'lodash'
+import Icon from '../icon'
import './style/index'
const noop = () => {}
@@ -9,6 +11,7 @@ class Collapse extends Component {
accordion: PropTypes.bool, // 手风琴模式
activeKey: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
activeId: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+ defaultActiveId: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
onChange: PropTypes.func,
icon: PropTypes.string,
type: PropTypes.string, // TODO:废弃
@@ -26,18 +29,29 @@ class Collapse extends Component {
}
constructor (props) {
super(props)
- const { activeId, activeKey } = this.props
- const _activeId = activeId || activeKey
+ const { activeId, activeKey, defaultActiveId } = this.props
+ const _activeId = activeId || activeKey || defaultActiveId || []
this.state = {
activeId: Array.isArray(_activeId) ? _activeId : [_activeId]
}
}
+ static getDerivedStateFromProps (nextProps, prevState) {
+ if (
+ !_.isEqual(nextProps.activeId !== prevState.activeId) &&
+ nextProps.activeId !== undefined
+ ) {
+ return {
+ activeId: nextProps.activeId
+ }
+ }
+ return null
+ }
onClickPanel (key) {
let activeKey = this.state.activeId
if (this.props.accordion) {
activeKey = activeKey[0] === key ? [] : [key]
} else {
- activeKey = [...activeKey]
+ activeKey = activeKey !== 'undefined' ? [...activeKey] : []
const index = activeKey.indexOf(key)
const isActive = index > -1
if (isActive) {
@@ -98,18 +112,30 @@ class CollapsePanel extends Component {
}
render () {
- const { key, arrow, header, disabled, isActive, children, onClickPanel, showArrow } = this.props
+ const {
+ key,
+ arrow,
+ header,
+ disabled,
+ isActive,
+ children,
+ onClickPanel,
+ showArrow
+ } = this.props
let classnames = classNames('collapse-item', {
'collapse-item--show': isActive,
'collapse-item--disabled': disabled
})
- const collapseIcon = classNames('collapse-item__icon', 'hi-icon', 'icon-down')
return (
diff --git a/components/collapse/style/index.scss b/components/collapse/style/index.scss
index 0b052f9f3..d28b2f64e 100755
--- a/components/collapse/style/index.scss
+++ b/components/collapse/style/index.scss
@@ -1,17 +1,17 @@
+@import '../../core-css/index.scss';
.hi-collapse {
text-align: left;
border-bottom: 0;
- border-radius: 3px;
- font-size: 14px;
+ font-size: $font-size-normal;
.collapse-item {
- border-bottom: 1px solid #d8d8d8;
+ border-bottom: 1px solid use-color('gray-30');
&__head {
display: flex;
align-items: center;
- background-color: #fff;
+ background-color: use-color('white');
padding: 12px 0 12px 16px;
color: rgba(0, 0, 0, 0.85);
cursor: pointer;
@@ -38,7 +38,7 @@
color: rgba(0, 0, 0, 0.65);
overflow: hidden;
box-sizing: border-box;
- background-color: #fbfbfb;
+ background-color: use-color('gray-10');
}
&--show {
@@ -58,7 +58,7 @@
&--disabled {
.collapse-item__head {
cursor: not-allowed;
- color: #ccc;
+ color: use-color('gray-50');
}
}
}
@@ -66,7 +66,7 @@
&__simple {
.collapse-item {
.head {
- background-color: #fff;
+ background-color: use-color('white');
}
}
}
diff --git a/components/confirm/index.js b/components/confirm/index.js
deleted file mode 100644
index 6cb836ed4..000000000
--- a/components/confirm/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, { Component } from 'react'
-import ReactDOM from 'react-dom'
-
-import Modal from '../modal'
-import './style/index'
-import Provider from '../context'
-
-class Confirm extends Component {
- render () {
- let { content, onOk, onCancel, title, localeDatas } = this.props
-
- return (
-
- {(contextTheme) => {
+ {contextTheme => {
noticeTheme = noticeTheme || contextTheme
return (
- {(contextLocale) => {
- confirmLocale = confirmLocale || contextLocale
- return (
-
)
}}
)
- return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(ConsumerComponent)
+ return wrapProvider(theme, ThemeContext)(locale, LocaleContext)(
+ ConsumerComponent
+ )
}
}
return forwardRef((props, ref) => {
@@ -55,8 +57,12 @@ function wrapProvider (value, context) {
}
if (!context) {
let component = value
- wrapProvider.Providers.reverse().map((obj) => {
- component = {component}
+ wrapProvider.Providers.reverse().map(obj => {
+ component = (
+
+ {component}
+
+ )
})
wrapProvider.Providers = []
return component
diff --git a/components/core-css/README.md b/components/core-css/README.md
new file mode 100644
index 000000000..f91d4c5a3
--- /dev/null
+++ b/components/core-css/README.md
@@ -0,0 +1,24 @@
+# HiUI Core CSS
+
+[](https://circleci.com/gh/hiui-group/core-css)
+
+HiUI core styles, include common reset, helper classes and typography. i18n supported.
+
+## Usage
+
+For component usage, just use `@import '@hi-ui/core-css/index.scss';` imports variables and mix-ins.
+
+---
+
+HiUI 核心样式文件，包含组件初始化、函数、排版等样式。
+
+## 使用
+
+组件依赖直接引入 `@import '~@hi-ui/core-css/index';`，只包含变量和函数，不会插入任何实质代码。
+
+## WIP
+
+- [ ] 全局替换为 HSL 颜色格式；
+- [ ] 使用 CSS Variables 作为变量
+
+-- EOF --
diff --git a/components/core-css/index.scss b/components/core-css/index.scss
new file mode 100644
index 000000000..fe064a894
--- /dev/null
+++ b/components/core-css/index.scss
@@ -0,0 +1,6 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: import variables and mixins.
+
+//@import './lib/i18n/zh-CN';
+@import './lib/variables';
+@import './lib/mixins';
diff --git a/components/core-css/lib/_common.scss b/components/core-css/lib/_common.scss
new file mode 100644
index 000000000..470706898
--- /dev/null
+++ b/components/core-css/lib/_common.scss
@@ -0,0 +1,74 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: define common functions, colors etc.
+
+/// Slightly lighten a color
+/// @access private
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function tint($color, $percentage) {
+ @return mix(white, $color, $percentage);
+}
+
+/// Slightly darken a color
+/// @access private
+/// @param {Color} $color - color to shade
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function shade($color, $percentage) {
+ @return mix(black, $color, $percentage);
+}
+
+/// Get color from palette
+/// @access public
+/// @param {Map} $palette - palette name
+/// @param {String} $name - color name from this palette
+/// @param {Number} $i - index
+/// @return {Color}
+/// @example
+/// color: get-color($palettePrimary, grayLight);
+/// // color: #eee;
+/// color: get-color($paletteSecondary, purple, 2);
+/// // color: #773686;
+@function get-color($palette, $name, $i: 1) {
+ @return if(type-of(map-get($palette, $name)) == 'list', nth(map-get($palette, $name), $i), map-get($palette, $name));
+}
+
+/// Main theme colors for different palettes
+/// @type Map
+$_theme-colors: (
+ 'orange': hsl(15, 100%, 60%),
+ 'cyan': hsl(162, 47%, 51%),
+ 'magenta': hsl(350, 100%, 67%),
+ 'lavender': hsl(282, 68%, 59%),
+ 'blue': hsl(205, 90%, 60%),
+ 'purple': hsl(240, 38%, 67%),
+ 'ocher': hsl(28, 35%, 38%)
+) !default;
+
+/// Main theme colors extend hiui-blue
+/// @type Map
+$palette-primary: map-merge(('hiui-blue': hsl(217, 89%, 61%)), $_theme-colors) !default;
+
+/// Palette for status colors
+/// @type Map
+$palette-secondary: (
+ 'success': hsl(144, 70%, 38%),
+ 'warning': hsl(40, 100%, 55%),
+ 'danger': hsl(0, 89%, 61%)
+) !default;
+
+/// Palette for grayscale colors
+/// @type Map
+/// @todo should update
+$palette-tertiary: (
+ 'black': hsl(0, 0%, 20%),
+ 'gray-80': hsl(0, 0%, 40%),
+ 'gray-70': hsl(0, 0%, 60%),
+ 'gray-50': hsl(0, 0%, 80%),
+ 'gray-30': hsl(0, 0%, 85%),
+ 'gray-20': hsl(0, 0%, 90%),
+ 'gray-10': hsl(0, 0%, 95%),
+ 'white': hsl(0, 0%, 100%),
+ 'blue-lighter': hsl(220, 90%, 96%), /// @deperated
+) !default;
diff --git a/components/core-css/lib/_mixins.scss b/components/core-css/lib/_mixins.scss
new file mode 100644
index 000000000..19c3d1516
--- /dev/null
+++ b/components/core-css/lib/_mixins.scss
@@ -0,0 +1,180 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: define mix-ins, functions etc.
+
+@import 'common';
+
+/// Slightly lighten a color
+/// @access private
+/// @param {Color} $color - color to tint
+/// @param {Number} $percentage - percentage of `$color` in returned color
+/// @return {Color}
+@function use-color($color-name: '') {
+ @return var(--color#{if($color-name != '', '-' + $color-name, null)});
+}
+
+/// Deprecated: Convert hex color to hsl format
+/// @deprecated
+/// @access public
+@function hex-to-hsl($color) {
+ @return hue($color), saturation($color), lightness($color);
+}
+
+/// Helper to clear inner floats
+/// @access public
+@mixin clearfix() {
+ &::after {
+ content: '';
+ display: table;
+ clear: both;
+ }
+}
+
+/// Text ellipsis
+/// @access public
+@mixin ellipsis() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+/// Image Replacement
+/// @access public
+@mixin hide-text() {
+ overflow: hidden;
+ text-indent: 100%;
+ white-space: nowrap;
+}
+
+/// Get CSS variables, generate css variables snippet by given color
+/// @access public
+@mixin get-vars($color: get-color($palette_primary, 'hiui-blue')) {
+ --color-primary: #{$color}; // primary color
+ --color-primary-h: #{hue($color)};
+ --color-primary-s: #{saturation($color)};
+ --color-primary-l: #{lightness($color)};
+ //--color-primary-hsl: #{var(--color-primary-h), var(--color-primary-s), var(--color-primary-l)};
+ --color-primary-10: #{tint($color, 96%)};
+ --color-primary-20: #{tint($color, 92%)}; // background hover color
+ --color-primary-30: #{tint($color, 76%)};
+ --color-primary-40: #{tint($color, 60%)};
+ --color-primary-50: #{tint($color, 30%)}; // base color hover
+ --color-primary-60: #{shade($color, 10%)}; // base color active
+ --color-primary-70: #{shade($color, 30%)};
+ --color-primary-80: #{shade($color, 40%)};
+ --color-primary-90: #{shade($color, 50%)};
+ --color-success: #{get-color($palette-secondary, 'success')};
+ --color-success-20: #{tint(get-color($palette-secondary, 'success'), 92%)}; // background color
+ --color-success-30: #{tint(get-color($palette-secondary, 'success'), 76%)}; // box-shadow color
+ --color-success-40: #{tint(get-color($palette-secondary, 'success'), 60%)}; // border color
+ --color-success-50: #{tint(get-color($palette-secondary, 'success'), 30%)}; // hover color
+ --color-success-60: #{shade(get-color($palette-secondary, 'success'), 10%)}; // active color
+ --color-warning: #{get-color($palette-secondary, 'warning')};
+ --color-warning-20: #{tint(get-color($palette-secondary, 'warning'), 92%)};
+ --color-warning-30: #{tint(get-color($palette-secondary, 'warning'), 76%)};
+ --color-warning-40: #{tint(get-color($palette-secondary, 'warning'), 60%)};
+ --color-warning-50: #{tint(get-color($palette-secondary, 'warning'), 30%)};
+ --color-warning-60: #{shade(get-color($palette-secondary, 'warning'), 10%)};
+ --color-danger: #{get-color($palette-secondary, 'danger')};
+ --color-danger-20: #{tint(get-color($palette-secondary, 'danger'), 92%)};
+ --color-danger-30: #{tint(get-color($palette-secondary, 'danger'), 76%)};
+ --color-danger-40: #{tint(get-color($palette-secondary, 'danger'), 60%)};
+ --color-danger-50: #{tint(get-color($palette-secondary, 'danger'), 30%)};
+ --color-danger-60: #{shade(get-color($palette-secondary, 'danger'), 10%)};
+ --color-black: #{get-color($palette-tertiary, 'black')}; // title
+ --color-gray-80: #{get-color($palette-tertiary, 'gray-80')}; // text
+ --color-gray-70: #{get-color($palette-tertiary, 'gray-70')}; // text alter
+ --color-gray-50: #{get-color($palette-tertiary, 'gray-50')}; // text disabled
+ --color-gray-30: #{get-color($palette-tertiary, 'gray-30')}; // border
+ --color-gray-20: #{get-color($palette-tertiary, 'gray-20')}; // line
+ --color-gray-10: #{get-color($palette-tertiary, 'gray-10')}; // background alter
+ --color-white: #{get-color($palette-tertiary, 'white')}; // white
+}
+
+/// Use CSS variable
+/// @access public
+/// @Todo: switch to postcss
+/// @example:
+/// :root {
+/// --color-brand: #ff6700;
+/// }
+/// .modern {
+/// @include use-var(background-color, color-brand);
+/// }
+/// .modern-with-fallback {
+/// @include use-var(background-color, color-brand, #000);
+/// }
+/// .legacy {
+/// @include use-var(background-color, color-brand, #000, true);
+/// }
+/// .legacy-with-test {
+/// @include use-var(background-color, color-brand, #000, '.no-custom-properties');
+/// }
+@mixin use-var($property, $value, $fallback: false, $compatible-mode: false) {
+ // if fallback value given
+ @if $fallback {
+ // if need compatible selector
+ @if $compatible-mode {
+ @if type-of($compatible-mode) == string {
+ #{$property}: var(--#{$value}, #{$fallback});
+
+ #{$compatible-mode} & {
+ #{$property}: $fallback;
+ }
+ }
+
+ @else {
+ #{$property}: $fallback;
+ #{$property}: var(--#{$value}, #{$fallback});
+ }
+ }
+
+ @else {
+ #{$property}: var(--#{$value}, #{$fallback});
+ }
+ }
+
+ @else {
+ #{$property}: var(--#{$value});
+ }
+}
+
+/// Isolate component style
+/// @access public
+/// block elements reset: margin, padding, text style,
{ this.inputContainer = node }} onClick={this.handleClick.bind(this)}>
- {
- this.inputRef = node
- }}
- className='hi-cascader__input-keyword'
- value={(popperShow && keyword) || (!popperShow && cascaderLabel) || ''}
- readOnly={!searchable}
- disabled={disabled}
- placeholder={placeholder}
- onChange={e => { this.setState({keyword: e.target.value}) }}
- onKeyUp={this.debouncedKeywordChange.bind(this)}
- />
-
-
- {
- clearable &&
-
+ inputRef.current.focus()
+ }
+ },
+ [popperShow, cacheValue, cascaderValue, keyword]
+ )
+
+ const expandIcon = popperShow ? 'icon-up' : 'icon-down'
+ const placeholder = cascaderLabel || localeDatasProps('placeholder')
+
+ return (
+ {
+ setPopperShow(false)
+ }}
+ >
+
+
+
+ )
}
-
export default Provider(Cascader)
-export {
- Cascader
-}
+export { Cascader }
diff --git a/components/cascader/Menu.js b/components/cascader/Menu.js
index f0dd8f1d5..d18d4da5b 100644
--- a/components/cascader/Menu.js
+++ b/components/cascader/Menu.js
@@ -1,114 +1,119 @@
-import React, { Component } from 'react'
+import React, { useCallback, forwardRef } from 'react'
import classNames from 'classnames'
-import PropTypes from 'prop-types'
-import Loading from '../loading'
-
-class Menu extends Component {
- static propTypes = {
- value: PropTypes.array,
- options: PropTypes.array,
- onSelect: PropTypes.func
- }
- root () {
- return this.props.root()
- }
-
- getOptionValues (values, optionValue, index) {
- if (index === 0) {
- return [optionValue]
- } else {
- return values.slice(0, index).concat([optionValue])
- }
- }
+import Loading from '../loading'
+import EmptyPng from './img/empty.png'
- renderMenus = () => {
- const {
+const Menu = forwardRef(
+ (
+ {
value,
options,
onSelect,
isFiltered,
filterOptionWidth,
theme,
- trigger,
- onHoverSelect,
- onHoverClick
- } = this.props
- const root = this.root()
- const menus = []
- const valueKey = root.valueKey()
- const labelKey = root.labelKey()
- const childrenKey = root.childrenKey()
- let currentOptions = options.slice()
- let deep = 0
- while (currentOptions) {
- let currentValue = value[deep]
- const _currentOptions = currentOptions.slice()
- currentOptions = false
+ valueKey,
+ labelKey,
+ childrenKey,
+ onHover,
+ expandTrigger,
+ localeDatasProps,
+ emptyContent
+ },
+ ref
+ ) => {
+ // 配置化
+ const renderMenus = useCallback(() => {
+ let currentOptions = options.slice()
+ let deep = 0
+ const menus = []
+ while (currentOptions) {
+ const currentValue = value[deep]
+
+ const _currentOptions = currentOptions.slice()
+ currentOptions = false
+ if ((isFiltered && value.length > deep) || !isFiltered) {
+ menus.push(
+
+ )
+ deep++
+ }
+ }
+ return menus
+ }, [options, value, valueKey])
- return menus
+ const getOptionValues = useCallback((values, optionValue, index) => {
+ if (index === 0) {
+ return [optionValue]
+ } else {
+ return values.slice(0, index).concat([optionValue])
+ }
+ }, [])
+ return (
+
+
-
+ {clearable && ((searchable && keyword !== '') || (!popperShow && cascaderLabel !== '')) && (
+
+ )}
+
- )
- }
-}
-
-Cascader.childContextTypes = {
- component: PropTypes.any
+
+ {
+ if (!e.target.value) {
+ clearValue(e)
}
-
-
-
+ {((value.length !== 0 && isFiltered) || !isFiltered) && renderMenus()}
+ {value.length === 0 && isFiltered && (
+ <>
+ 
+
+ )
}
-}
-
+)
export default Menu
diff --git a/components/cascader/img/empty.png b/components/cascader/img/empty.png
new file mode 100644
index 000000000..2b91293fb
Binary files /dev/null and b/components/cascader/img/empty.png differ
diff --git a/components/cascader/index.d.ts b/components/cascader/index.d.ts
new file mode 100644
index 000000000..00260c43f
--- /dev/null
+++ b/components/cascader/index.d.ts
@@ -0,0 +1,30 @@
+type DataItem = {
+ content: string
+ id: string | number
+ disabled?: boolean
+}
+type FieldNames = {
+ label?: string
+ value?: string
+ children?: string
+}
+interface Props {
+ fieldNames?: FieldNames
+ data: DataItem
+ value: string[] | number[]
+ defaultValue: string[] | number[]
+ expandTrigger?: 'click' | 'hover'
+ searchable?: boolean
+ filterOption?: (keyword: string, item: DataItem) => boolean
+ clearable?: boolean
+ disabled?: boolean
+ changeOnSelect?: boolean
+ placeholder?: string
+ emptyContent?: string | JSX.Element
+ displayRender?: (value: string[] | number[]) => string
+ style?: object
+ onChange?: (value: string[] | number[]) => void
+ overlayClassName?: string
+}
+declare const Card: React.ComponentType{emptyContent || localeDatasProps('emptyContent')}
' ' + + )} + onClickPanel(key)}>
- {showArrow && arrow === 'left' && }
+ {showArrow && arrow === 'left' && (
+
{header}
- {showArrow && arrow === 'right' && }
+ {showArrow && arrow === 'right' && (
+ {children}
- {
- if (onOk) {
- onOk()
- }
- confirmInstance.destroy()
- }}
- onCancel={() => {
- if (onCancel) {
- onCancel()
- }
-
- confirmInstance.destroy()
- }}
- >
- {content}
-
-
- )
- }
-}
-Confirm.IS_HIUI_CONFIRM = true
-Confirm.newInstance = function newNotificationInstance (properties) {
- let props = properties || {}
- let div = document.createElement('div')
- document.body.appendChild(div)
- ReactDOM.render(React.createElement(Provider(Confirm), props), div)
- return {
- destroy () {
- ReactDOM.unmountComponentAtNode(div)
- document.body.removeChild(div)
- confirmInstance = null
- }
- }
-}
-
-let confirmInstance = null
-export default function getConfirmInstance (obj) {
- confirmInstance = Confirm.newInstance(obj)
- return confirmInstance
-}
diff --git a/components/confirm/style/index.scss b/components/confirm/style/index.scss
deleted file mode 100644
index 9f0fbe87f..000000000
--- a/components/confirm/style/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.hi-confirm {
- .hi-modal {
- .title {
- border: none;
- }
-
- .control {
- border: none;
- }
- }
-}
diff --git a/components/context/index.js b/components/context/index.js
index 013e3dcbf..3f1b2da3e 100644
--- a/components/context/index.js
+++ b/components/context/index.js
@@ -2,42 +2,44 @@ import React, { Component, forwardRef } from 'react'
import locales from '../locales'
export const ThemeContext = React.createContext('hiui-blue')
-export const LocaleContext = React.createContext('zh-Hans')
+export const LocaleContext = React.createContext('zh-CN')
/**
* 临时解决 notice组件获取不到theme的问题
*/
let noticeTheme = ''
-let confirmLocale = ''
-export default (WrappedComponent) => {
+export default WrappedComponent => {
class WrapperComponent extends Component {
static displayName = WrappedComponent.name
render () {
const { theme, locale, innerRef, ...restProps } = this.props
let ConsumerComponent = (
- ,
- {data.text} - ) - }) - } - {this.liSuffix} -
- { - const ts = item.split(' ~ ') - onTimePeriodPick(ts[0], ts[1]) - }} - >{item} - }) - } -
- shortcutsClickEvent(m)}> + {m.title || m} + + ) + })} +
- + {data.text} + + ) + })} + {SUFFIX} +
- { + onTimePeriodPick(item.timeStart, item.timeEnd) + }} + > + {item.timeStr} + + ) + })} +
- {m} - ) - }) - } - {this.liSuffix} -
- {m} - }) - } - {this.liSuffix} -
- {m} - }) - } - {this.liSuffix} -
- { - const ts = item.split(' ~ ') - onTimePeriodPick(ts[0], ts[1]) - }} - >{item} - }) - } -
- + {shouldUseLink ? ( + + {children} + + ) : ( + children + )} + + ) } - return ( -
- - {shouldUseLink ? {children} : children} - - ) -}) +) export default class DropdownMenuItem extends React.Component { refItem = React.createRef() @@ -51,18 +59,14 @@ export default class DropdownMenuItem extends React.Component { this.setMenuHide() } - handleMenuItemClick = (event) => { + handleMenuItemClick = event => { if (event) { event.stopPropagation() - event.preventDefault() - if (event.nativeEvent && event.nativeEvent.stopImmediatePropagation) { - event.nativeEvent.stopImmediatePropagation() - } } const { onMenuItemClick, id, children, href } = this.props - onMenuItemClick(id, (href || !children)) + onMenuItemClick(id, href || !children) } - render () { + render() { const { title, children, diff --git a/components/dropdown/index.d.ts b/components/dropdown/index.d.ts new file mode 100644 index 000000000..fc5e7b56c --- /dev/null +++ b/components/dropdown/index.d.ts @@ -0,0 +1,27 @@ +import { CSSProperties } from "react" + +type DataItem = { + title: string | JSX.Element + id: string | number + disabled?: boolean + href?: string +} +interface TriggersArray { + [index: number]: 'click' | 'contextmenu' | 'hover' +} +interface Props { + trigger?: TriggersArray[number] | TriggersArray + data: DataItem[] + title: string | JSX.Element + type?: 'text' | 'button' | 'group' + placement?: 'bottom-start' | 'top-start' | 'bottom' | 'top' + disabled?: boolean + width?: number + className?: string + style?: CSSProperties + onClick?: (id: string | number) => void + onButtonClick?: (event: MouseEvent) => void + overlayClassName?: string +} +declare const Dropdown: React.ComponentType
- { + if (disabled) { + return + } + const _activeId = selectId || [] + _activeId.splice(level - 1) + _activeId[level - 1] = id + if (!value) { + setSelectId(_.cloneDeep(_activeId)) + } + onClick && onClick(item) + onChange && !active && onChange(_activeId) + }} + > + {content} + {active && showUnderline && } + + ) + } + const renderCascadeContent = () => { + const content = [] + let currentOptions = _.cloneDeep(options) + let level = 0 + let levelLabel + while (currentOptions || levelLabel) { + const _currentOptions = _.cloneDeep(currentOptions) + currentOptions = false + const levelActiveId = selectId && selectId.length ? selectId[level] : null + const _label = label.length ? label[level] : undefined + level++ + levelLabel = label.length ? label[level] : undefined + content.push( +
- + {item} + + ) + })} +
-
+ + {avatar && ( ++ + {action && ( +++ )} + {renderItem && renderItem(item)} +
+
+ {action(item)} ++ )} +
+ )
+ }
+ return (
+ - {emptyText} + )} +
- {data.content} } - renderFatSubMenu (data, parentIndex) { + renderFatSubMenu(data, parentIndex) { // render胖菜单 - let groups = [] + const groups = [] data.forEach((dataItem, groupIndex) => { groups.push( -
-
- +
- +
{dataItem.children && ( --
+
- - {render ? render(item) : item.title} - - ) - }) - } - renderSubMenuItem = () => { - const { prefixCls, render } = this.props - const { selectedSubKey, subMenuChildred } = this.state - - return subMenuChildred.map((item, index) => { - const classes = classNames(`${prefixCls}__sub`, { - 'on': selectedSubKey === index, - 'hi-navmenu__item--disabled': item.disabled - }) - - return ( -
- - {render ? render(item.title) : item.title} - - ) - }) - } - rednerTabContent = () => { - const { prefixCls, children } = this.props - const { selectedKey } = this.state - return React.Children.map(children, (item, index) => { - const tabCtxCls = classNames(`${prefixCls}__content-item`, item.props.className, { - 'hi-navmenu__content-item--show': selectedKey === index - }) - return cloneElement(item, { - className: tabCtxCls - }) - }) - } - render () { - const {prefixCls, children, vertical, width} = this.props - const {toggleOn, subMenuShow, toggleShow, subMenuChildred} = this.state - const togClasses = classNames(`${prefixCls}__toggle`, { - 'hi-navmenu__toggle--show': toggleShow, - 'hi-navmenu__toggle--on': toggleOn - }) - const ulClasses = classNames(`${prefixCls}__list`, { - 'hi-navmenu__list--vertical': vertical, - 'hi-navmenu__list--on': toggleOn - }) - const subMenCls = classNames(`${prefixCls}__sublist`, { - 'hi-navmenu__sublist--on': subMenuShow - }) - const _verticalStyle = vertical ? {width: typeof width === 'number' ? `${width}px` : width} : {} - return ( -
-
this.handleIconEnter(halfValue)} - onMouseMove={() => this.handleIconEnter(halfValue)} - onClick={() => this.handleIconClick(halfValue)} - /> + className={classnames(iconHalfCls, `${iconHalfCls}--${vertical ? 'top' : 'left'}`, { + grayscale: vertical ? indexValue > currentValue : currentValue < halfValue + })} + onMouseEnter={() => handleIconEnter(vertical ? indexValue : halfValue)} + onMouseMove={() => handleIconEnter(vertical ? indexValue : halfValue)} + onClick={() => handleIconClick(vertical ? indexValue : halfValue)} + > + {renderIcon(indexValue)} ++this.handleIconEnter(value)} - onMouseMove={() => this.handleIconEnter(value)} - onClick={() => this.handleIconClick(value)} - /> - {this.renderIcon(value)} + className={classnames(iconHalfCls, `${iconHalfCls}--${vertical ? 'bottom' : 'right'}`, { + grayscale: vertical ? currentValue < halfValue : indexValue > currentValue + })} + onMouseEnter={() => handleIconEnter(vertical ? halfValue : indexValue)} + onMouseMove={() => handleIconEnter(vertical ? halfValue : indexValue)} + onClick={() => handleIconClick(vertical ? halfValue : indexValue)} + > + {renderIcon(indexValue)} +
- + { + optionsClick(typeof ele.title === 'string' ? ele.title : ele.id, ele) + }} + > + {typeof ele.title === 'string' ? highlightKeyword(ele.title, ele.id) : ele.title} + + + ) + })} +
- + { + optionsClick(typeof item.title === 'string' ? item.title : item.id, item) + }} + > + {typeof item.title === 'string' ? highlightKeyword(item.title, item.id) : item.title} + + {item.children && ItemChildren(item)} + + ) + }, + [highlightKeyword, ItemChildren] + ) + + const { searchEmptyResult } = localeDatas.search + return ( +
- {searchEmptyResult} + )} +
- + empty + + ) : ( + renderData.map((node, index) => { + const children = getChildrenNodes(node, data) + const textCls = classNames( + 'hi-breadtree__text', + selectedItems.find((n) => n.id === node.id) && 'hi-breadtree__text--selected' + ) + return ( +
-
+ {checkable && node.isLeaf ? (
+
onCheck(e.target.checked, node)} + > + {node.title} + + ) : ( + { + onNodeClick(node, children) + }} + > + {node.title} + + )} + {(children.length > 0 || !node.isLeaf) && ( +onNodeClick(node, children)} /> + )} +
+ )
+ })
+ )}
+ -
+ + {(childrenNodes.length || isRemoteLoadData) && !node.isLeaf ? ( ++
+ ) : ( + renderIndent() + )} + {checkable ? renderCheckbox(node, checkedNodes) : renderTitle(node, selectedId)} +
+ {childrenNodes.length > 0 && expand && (
+ -
+
+
+ )}
+ - + {filterGroupItem[transKeys(fieldNames, 'title')]} + + ) + renderGroup.push(label) + filterGroupItem[transKeys(fieldNames, 'children')].forEach((item, index) => { + renderGroup.push(normalItem(item, filterItemsIndex + 1 + '-' + index)) + }) + return renderGroup + } + const normalItem = (item, filterItemsIndex) => { + matched++ + const isSelected = itemSelected(item) + const isDisabled = item[transKeys(fieldNames, 'disabled')] return ( -
- e.stopPropagation()} + > + {emptyContent} + + )} +
- this.onClickOption(e, item, index)} - key={item.id} - data-focused={focusedIndex === index} - onMouseEnter={() => this.onMouseEnter(item, index)} - > - {this.renderOption(mode, isSelected, item)} - - ) - } - }) - } - {matched === 0 && ( -
- e.stopPropagation()}
+ {!loading && renderItems()}
+
+ {mode === 'multiple' && (showCheckAll || showJustSelected) && (
+ ++ )} ++ {showCheckAll && ( +- ) - } +
{ + checkAll(e, filterItems, e.target.checked) + }} > - {noFoundTip} - + {localeMap.checkAll} + )} - - )} - {mode === 'multiple' && showCheckAll && ( -- {localeMap['checkAll']}- )} -+ {showJustSelected && ( ++{ + showSelected(e.target.checked) + }} + > + {localeMap.justSelected} + + )} + - this.onClickOption(e, item, index)} + key={item.id} + data-focused={focusedIndex === index} + onMouseEnter={() => this.onMouseEnter(item, index)} + > + {this.renderOption(mode, isSelected, item)} + + ) + } + })} + {matched === 0 && ( +
- e.stopPropagation()} + > + {noFoundTip} + + )} +
-
{dataItem.children.map((child, index) => {
return this.renderItem(child, parentIndex + '-' + groupIndex + '-' + index, { level: 2 })
})}
@@ -232,10 +232,10 @@ class Menu extends Component {
return groups
}
- renderMenu (data, parentIndex = '') {
- const { showAllSubMenus, placement, theme } = this.props
+ renderMenu(data, parentIndex = '') {
+ const { showAllSubMenus, placement, theme, overlayClassName } = this.props
const { activeIndex, expandIndex, collapsed } = this.state
- let items = []
+ const items = []
const renderMenu = showAllSubMenus ? this.renderFatSubMenu.bind(this) : this.renderMenu.bind(this)
data.forEach((item, index) => {
const indexStr = parentIndex !== '' ? parentIndex + '-' + index : '' + index
@@ -246,6 +246,7 @@ class Menu extends Component {
- - {this.renderMenu(data)}
- {this.renderMenu(data)}
+{miniIcon})} diff --git a/components/menu/SubMenu.js b/components/menu/SubMenu.js index e1a8d8837..45173e2ab 100644 --- a/components/menu/SubMenu.js +++ b/components/menu/SubMenu.js @@ -5,17 +5,17 @@ import Popper from '../popper' import Icon from '../icon' import Title from './Title' class SubMenu extends Component { - onClick (index) { + onClick(index) { this.props.onClick(index) } - checkActive (activeIndex, index) { + checkActive(activeIndex, index) { const indexArr = index.split('-') const activeIndexArr = activeIndex.split('-') return activeIndexArr.slice(0, indexArr.length).join('-') === index } - checkExpand (activeIndex, expandIndex, index) { + checkExpand(activeIndex, expandIndex, index) { return expandIndex.some((item) => { const indexArr = index.split('-') const expandIndexArr = item.split('-') @@ -23,8 +23,8 @@ class SubMenu extends Component { }) } - renderPopperMenu (deepSubmenu, isExpand) { - const { mini, datas, index, renderMenu, fatMenu, clickInside, theme } = this.props + renderPopperMenu(deepSubmenu, isExpand) { + const { mini, datas, index, renderMenu, fatMenu, clickInside, theme, overlayClassName } = this.props let leftGap let topGap let placement @@ -46,6 +46,7 @@ class SubMenu extends Component { zIndex={1050} topGap={topGap} leftGap={leftGap} + overlayClassName={overlayClassName} className={classNames('hi-submenu__popper', `theme__${theme}`, { 'hi-submenu__popper--fat': fatMenu })} @@ -62,7 +63,7 @@ class SubMenu extends Component { ) } - renderVerticalMenu (isActive, isExpand) { + renderVerticalMenu(isActive, isExpand) { const { datas, index, renderMenu, clickInside, theme } = this.props return (- +diff --git a/components/menu/index.d.ts b/components/menu/index.d.ts new file mode 100644 index 000000000..d1da36b67 --- /dev/null +++ b/components/menu/index.d.ts @@ -0,0 +1,22 @@ +type DataItem = { + content: string | JSX.Element + icon?: string | JSX.Element + id: string | number + disabled?: boolean + children?: DataItem[] +} +interface Props { + data: DataItem[] + activeId?: string | number + placement?: 'horizontal' | 'vertical' + collapsed?: boolean + showCollapse?: boolean + showAllSubMenus?: boolean + accordion?: boolean + onClick?: (activeId: string | number, prevActiveId: string | number) => void + onClickSubMenu?: (subMenuIndexs: number) => void + onCollapse?: (collapsed: boolean) => void + overlayClassName?: string +} +declare const Menu: React.ComponentType+export default Menu diff --git a/components/menu/style/index.scss b/components/menu/style/index.scss index 7e05d0a20..e890535d3 100644 --- a/components/menu/style/index.scss +++ b/components/menu/style/index.scss @@ -1,4 +1,4 @@ -@import '@hi-ui/core-css/index.scss'; +@import '../../core-css/index.scss'; @mixin ellipsis($max-width: initial, $width: auto) { width: $width; @@ -26,8 +26,6 @@ .hi-menu, .hi-submenu__popper { - @include component-reset(); - ul { margin-top: 0; margin-bottom: 0; @@ -48,17 +46,17 @@ &--active { > .hi-menu__title .hi-menu__title-content, > .hi-menu__title-content { - color: #4284f5; + color: use-color('primary'); } > .hi-menu__title .hi-menu__title-icon, > .hi-menu__title-icon { - color: #4284f5; + color: use-color('primary'); } > .hi-submenu__title { & > .hi-menu__title-toggle-icon { - color: #4284f5; + color: use-color('primary'); } } } @@ -66,7 +64,7 @@ &--disabled { .hi-menu__title { cursor: not-allowed; - color: #d8d8d8; + color: use-color('gray-30'); } } } @@ -75,7 +73,7 @@ display: flex; line-height: 22px; font-size: 14px; - color: #333; + color: use-color('black'); cursor: pointer; align-items: center; @@ -103,7 +101,7 @@ .hi-menu { &--horizontal { - border-bottom: 1px solid #e6e7e8; + border-bottom: 1px solid use-color('gray-20'); .hi-menu-item { position: relative; @@ -117,7 +115,7 @@ transform: translateX(-50%); width: 32px; height: 2px; - background-color: #4284f5; + background-color: use-color('primary'); } &:last-child { @@ -138,7 +136,7 @@ display: inline-block; width: 216px; padding: 12px 0; - background: #fff; + background: use-color('white'); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); box-sizing: border-box; @@ -151,14 +149,14 @@ position: relative; &--active:not(.hi-submenu) { - background-color: rgba(66, 133, 244, 0.08); + background-color: use-color('primary-20'); &::after { content: ''; position: absolute; width: 2px; height: 100%; - background-color: #4284f5; + background-color: use-color('primary'); left: 0; } } @@ -169,7 +167,7 @@ height: 48px; &:hover { - background-color: rgba(66, 133, 244, 0.08); + background-color: use-color('primary-20'); } } @@ -188,7 +186,7 @@ overflow: hidden; .hi-menu--1.hi-menu-item--active { - background-color: rgba(66, 133, 244, 0.08); + background-color: use-color('primary-20'); } .hi-menu__title { @@ -199,14 +197,14 @@ position: relative; &--active { - background-color: rgba(66, 133, 244, 0.08); + background-color: use-color('primary-20'); &::after { content: ''; position: absolute; width: 2px; height: 100%; - background-color: #4284f5; + background-color: use-color('primary'); left: 0; } } @@ -239,9 +237,9 @@ &__popper { width: 200px; padding: 8px 0; - background-color: #fff; + background-color: use-color('white'); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); - border: 1px solid rgba(230, 231, 232, 1); + border: 1px solid use-color('gray-20'); box-sizing: border-box; .hi-submenu__items { @@ -250,7 +248,7 @@ .hi-menu-item--disabled { cursor: not-allowed; - color: #d8d8d8; + color: use-color('gray-30'); } } @@ -271,12 +269,12 @@ width: 120px; &__title { - color: #999; + color: use-color('gray-70'); } &__content { font-size: 14px; - color: #999; + color: use-color('gray-70'); box-sizing: border-box; @include ellipsis(); @@ -284,138 +282,3 @@ } } } - -@each $key, $value in $palette-primary { - .theme__#{$key}.hi-menu { - .hi-menu-item { - &--active { - > .hi-menu__title .hi-menu__title-content, - > .hi-menu__title-content { - color: $value; - } - - > .hi-menu__title .hi-menu__title-icon, - > .hi-menu__title-icon { - color: $value; - } - - > .hi-submenu__title { - & > .hi-menu__title-toggle-icon { - color: $value; - } - } - } - - &--disabled { - .hi-menu__title { - cursor: not-allowed; - color: #d8d8d8; - } - } - - &--active::after { - background-color: $value; - } - } - - &.active { - border-color: $value; - } - - &--mini { - .hi-menu-item { - &--active { - background-color: rgba($value, 0.1); - - &::after { - background-color: $value; - } - } - } - } - - &--vertical { - box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); - - .hi-menu-item { - &--active:not(.hi-submenu) { - background-color: rgba($value, 0.1); - - &::after { - background-color: $value; - } - } - } - - .hi-menu__title { - &:hover { - background-color: rgba($value, 0.1); - } - } - } - } - - .theme__#{$key}.hi-menu-item { - &--active { - > .hi-menu__title .hi-menu__title-content, - > .hi-menu__title-content { - color: $value; - } - - > .hi-menu__title .hi-menu__title-icon, - > .hi-menu__title-icon { - color: $value; - } - - > .hi-submenu__title { - & > .hi-menu__title-toggle-icon { - color: $value; - } - } - } - - &--disabled { - .hi-menu__title { - cursor: not-allowed; - color: #d8d8d8; - } - } - - &--active::after { - background-color: $value; - } - } - - .theme__#{$key}.hi-submenu__popper { - .hi-menu-item { - &--active { - > .hi-menu__title .hi-menu__title-content, - > .hi-menu__title-content { - color: $value; - } - - > .hi-menu__title .hi-menu__title-icon, - > .hi-menu__title-icon { - color: $value; - } - - > .hi-submenu__title { - & > .hi-menu__title-toggle-icon { - color: $value; - } - } - } - - &--disabled { - .hi-menu__title { - cursor: not-allowed; - color: #d8d8d8; - } - } - - &--active::after { - background-color: $value; - } - } - } -} diff --git a/components/message/index.d.ts b/components/message/index.d.ts new file mode 100644 index 000000000..6893812e8 --- /dev/null +++ b/components/message/index.d.ts @@ -0,0 +1,13 @@ +interface Props { + +} +type Options = { + type?: 'info' | 'success' | 'error' | 'warning' + title: string + duration?: number +} +const OpenFun: (options: Options) => void +declare class Message extends React.Component - - - - ++@@ -35,7 +28,7 @@ const message = { key, closeable, duration, - type + type: _type }) } } diff --git a/components/message/style/index.scss b/components/message/style/index.scss index 5dd578915..3aa840abd 100755 --- a/components/message/style/index.scss +++ b/components/message/style/index.scss @@ -1,13 +1,10 @@ -@import '@hi-ui/core-css/index.scss'; -@import '../../style/icon/index.scss'; +@import '../../core-css/index.scss'; -$theme-colors-notice: ( - 'orange': #ffefea, - 'cyan': #ecf8f4 , - 'magenta': #ffeef1, - 'lavender': #f7edfb, - 'blue': #ebf6fe, - 'purple': #8a8acb +$color-map: ( + 'primary': use-color('primary'), + 'warning': get-color($palette-secondary, 'warning'), + 'success': get-color($palette-secondary, 'success'), + 'danger': get-color($palette-secondary, 'danger') ) !default; .hi-message__container { @@ -19,7 +16,7 @@ $theme-colors-notice: ( .hi-message { position: relative; - padding: 7px 12px; + padding: 9px 12px; margin-bottom: 10px; border-radius: 2px; transition: 0.3s ease; @@ -27,77 +24,35 @@ $theme-colors-notice: ( align-items: flex-start; width: 260px; box-sizing: border-box; - } - - .hi-message__title--wrapper { - display: flex; - align-items: center; - - .hi-message__title { - color: #333 !important; - font-size: 14px; - } - } - - .hi-message__icon { - font-size: 16px; - margin-right: 12px; - } - .hi-message--info { - background: #edf2fc; - border: 1px solid #d8e5ff; + @each $key, $value in $color-map { + &--#{$key} { + background-color: use-color(#{$key}-20); + border: 1px solid use-color(#{$key}-40); - .hi-message__title, - .hi-message__icon { - color: #4284f5; - } - - .hi-message__button { - background-color: #4284f5; + .hi-message__icon { + fill: $value; + } + } } } - .hi-message--error { - background: #feeff0; - border: 1px solid #ffe0e3; - - .hi-message__title, - .hi-message__icon { - color: #eb5252; - } - - .hi-message__button { - background-color: #eb5252; - } + .hi-message__header { + line-height: $line-height-size-normal; + display: flex; + align-items: center; } - .hi-message--success { - background: #e8f6ee; - border: 1px solid #cae9d7; - - .hi-message__title, - .hi-message__icon { - color: #1da653; - } - - .hi-message__button { - background-color: #1da653; - } + .hi-message__title { + color: use-color('black') !important; + font-size: $font-size-normal; } - .hi-message--warning { - background: #fbf5e6; - border: 1px solid #fcf0d4; - - .hi-message__title, - .hi-message__icon { - color: #e19d0c; - } - - .hi-message__button { - background-color: #e19d0c; - } + .hi-message__icon { + width: 16px; + height: 16px; + margin-right: 8px; + flex-shrink: 0; } .hi-message-enter { @@ -116,31 +71,3 @@ $theme-colors-notice: ( transform: translateY(-100%); } } - -@each $key, $value in $theme-colors { - .hi-message__container { - .theme__#{$key}.hi-message.hi-message--info { - border: - 1px - solid - map-get(get-palette(get-color($palette-primary, $key)), '20'); - - .hi-icon { - color: $value; - } - - .hi-message__button { - background-color: $value; - border: 1px solid $value; - } - } - } -} - -@each $key, $value in $theme-colors-notice { - .hi-message__container { - .theme__#{$key}.hi-message.hi-message--info { - background-color: $value; - } - } -} diff --git a/components/modal/index.d.ts b/components/modal/index.d.ts new file mode 100644 index 000000000..346619b59 --- /dev/null +++ b/components/modal/index.d.ts @@ -0,0 +1,16 @@ +import { CSSProperties } from "react" +interface Props { + title?: string | JSX.Element + visible?: boolean + closeable?: boolean + maskCloseable?: boolean + cancelText?: string + confirmText?: string + size?: 'default' | 'large' + style?: CSSProperties + footer?: JSX.Element | null + onCancel?: (e: MouseEvent) => void + onConfirm?: (e: MouseEvent) => void +} +declare const Modal: React.ComponentType{title && {title}}+export default Modal diff --git a/components/modal/index.js b/components/modal/index.js deleted file mode 100755 index 694fbbcdc..000000000 --- a/components/modal/index.js +++ /dev/null @@ -1,158 +0,0 @@ -import React, { Component } from 'react' -import { createPortal } from 'react-dom' -import PropTypes from 'prop-types' -import classNames from 'classnames' -import Button from '../button' -import Icon from '../icon' -import './style/index' -import Provider from '../context' -import confirm from '../confirm' - -class Modal extends Component { - static propTypes = { - title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - size: PropTypes.oneOf(['large', 'default', 'small']), - show: PropTypes.bool, // TODO: 废弃，使用 visible - visible: PropTypes.bool, - onConfirm: PropTypes.func, - onCancel: PropTypes.func, - confirmText: PropTypes.string, - cancelText: PropTypes.string, - backDrop: PropTypes.bool, // TODO: 废弃，使用 maskCloseable - maskCloseable: PropTypes.bool, - confirmType: PropTypes.string, - cancelType: PropTypes.string, - closeBtn: PropTypes.bool, // TODO: 废弃，使用 maskCloseable - closabble: PropTypes.bool - } - - static defaultProps = { - title: '', - adaptive: false, - backDrop: true, - maskCloseable: true, - show: false, - visible: false, - closeBtn: true, - closeable: true, - destory: false, - size: 'default' - } - constructor (props) { - super(props) - this.state = {} - this.node = document.createElement('div') - document.body.appendChild(this.node) - } - static getDerivedStateFromProps (props, state) { - // 屏蔽滚动条 - if (props.show || props.visible) { - document.body.style.setProperty('overflow', 'hidden') - } else { - document.body.style.removeProperty('overflow') - } - return null - } - componentWillUnmount () { - this._unblock() - } - _unblock () { - this.props.destory && document.body.removeChild(this.node) - document.body.style.removeProperty('overflow') - } - handleConfirm () { - if (this.props.onConfirm) { - this.props.onConfirm() - } - this._unblock() - } - handleClose () { - if (this.props.onCancel) { - this.props.onCancel() - } - this._unblock() - } - localeDatasProps (key) { - const { localeDatas } = this.props - if (this.props[key]) { - return this.props[key] - } else { - return localeDatas.modal[key] - } - } - renderFooter () { - const { footers, footer } = this.props - const cancelText = this.localeDatasProps('cancelText') - const confirmText = this.localeDatasProps('confirmText') - if (footers || footer) { - return footers || footer - } else { - return [ - , - - ] - } - } - render () { - const { - width, - style = {}, - title, - children, - backDrop, - maskCloseable, - closeBtn, - closeable, - footers, // TODO: 废弃，使用 footer 代替 - footer, - show, - visible, - size, - className - } = this.props - let _style = width ? Object.assign({}, { width }, { ...style }) : style - let classnames = classNames('hi-modal', show || visible ? '' : 'hi-modal--hide', className) - return createPortal( - -{ - ((backDrop && maskCloseable !== false) || (maskCloseable && backDrop !== false)) && - this.handleClose.apply(this) - }} - /> -, - this.node - ) - } -} - -const ModalWrapper = Provider(Modal) -ModalWrapper.confirm = confirm -export default ModalWrapper diff --git a/components/modal/index.jsx b/components/modal/index.jsx new file mode 100644 index 000000000..9af9aabe0 --- /dev/null +++ b/components/modal/index.jsx @@ -0,0 +1,209 @@ +import React, { useEffect, useRef, useState, useCallback } from 'react' +import { render, unmountComponentAtNode, createPortal } from 'react-dom' +import { CSSTransition } from 'react-transition-group' +import Classnames from 'classnames' +import Provider from '../context/index' +import Button from '../button' +import Icon from '../icon' +import './style/index' + +const PREFIX = 'hi-modal' + +const getDefaultContainer = () => { + const defaultContainer = document.createElement('div') + document.body.appendChild(defaultContainer) + return defaultContainer +} + +const InternalModalComp = ({ + children, + container, + visible, + title, + onConfirm, + onCancel, + maskClosable = true, + width, + height, + size = 'default', + showHeaderDivider = true, + showFooterDivider = true, + footer, + confirmText, + cancelText, + style, + className, + destroyOnClose, + localeDatas +}) => { + // TODO: 整体可以抽成一个 hooks 供 modal 和 drawer 复用 + const defaultContainer = useRef(false) + if (defaultContainer.current === false && !container) { + defaultContainer.current = getDefaultContainer() + } + + const [vi, setVi] = useState(false) + useEffect(() => { + visible && setVi(true) + }, [visible]) + + const destroy = useCallback(() => { + const _container = container || defaultContainer.current + unmountComponentAtNode(_container) + _container.parentNode.removeChild(_container) + }, []) + + useEffect(() => { + const parent = (container || defaultContainer.current).parentNode + // 屏蔽滚动条 + if (vi) { + parent.style.setProperty('overflow', 'hidden') + } else { + parent.style.removeProperty('overflow') + if (destroyOnClose) { + destroy() + } + } + }, [vi]) + + return createPortal( +- {(title || (closeBtn && closeable !== false) || (closeable && closeBtn !== false)) && ( ---- )} -{title}
- {((closeBtn && closeable !== false) || (closeable && closeBtn !== false)) && ( --- )} -- {children}- {(((!footers || footers.length > 0) && footer !== null) || footer) && ( -{this.renderFooter()}- )} -+{ + if (maskClosable && onCancel) { + onCancel() + } + }} + /> +, + container || defaultContainer.current + ) +} + +const confirmIconMap = { + success: { name: 'check-circle', color: '#1DA653' }, + error: { name: 'close-circle', color: '#EB5252' }, + warning: { name: 'exclamation-circle', color: '#e19d0b' }, + info: { name: 'info-circle', color: '#4284F5' } +} + +const confirm = ({ onConfirm, onCancel, title = '提示', content, type = 'default', confirmText, cancelText }) => { + const confirmContainer = document.createElement('div') + + document.body.appendChild(confirmContainer) + const modal = React.createElement(ModalComp, { + container: confirmContainer, + title, + width: 480, + height: 240, + visible: true, + confirmText, + cancelText, + onConfirm: () => { + onConfirm && onConfirm() + confirmContainer.parentNode.style.removeProperty('overflow') + unmountComponentAtNode(confirmContainer) + confirmContainer.parentNode.removeChild(confirmContainer) + }, + showFooterDivider: false, + children: ( +++{ + setTimeout(() => setVi(false), 300) + }} + > + ++++ {title} ++{ + if (onCancel) { + onCancel() + } + }} + /> + {children}+ {footer !== null && ( ++ {footer === undefined && cancelText !== null && ( + + )} + {footer === undefined && confirmText !== null && ( + + )} + {footer} ++ )} ++ {type !== 'default' && ( ++ ), + onCancel: () => { + onCancel && onCancel() + confirmContainer.parentNode.style.removeProperty('overflow') + unmountComponentAtNode(confirmContainer) + confirmContainer.parentNode.removeChild(confirmContainer) + } + }) + render(modal, confirmContainer) +} + +const ModalComp = Provider(InternalModalComp) +ModalComp.confirm = confirm +export default ModalComp diff --git a/components/modal/style/index.js b/components/modal/style/index.js index 14dd01250..63810a681 100644 --- a/components/modal/style/index.js +++ b/components/modal/style/index.js @@ -1,2 +1 @@ import './index.scss' -import '../../style/icon/index.scss' diff --git a/components/modal/style/index.scss b/components/modal/style/index.scss old mode 100755 new mode 100644 index a6c112489..be21726e4 --- a/components/modal/style/index.scss +++ b/components/modal/style/index.scss @@ -1,103 +1,122 @@ -@import '@hi-ui/core-css/index.scss'; - -.hi-modal { - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 1000; - - &--hide { - display: none !important; - } +@import '../../core-css/index.scss'; +$modal: 'hi-modal' !default; + +.#{$modal} { + color: use-color('black'); + font-size: $font-size-normal; &__mask { - position: absolute; + position: fixed; top: 0; left: 0; right: 0; bottom: 0; - z-index: 1000; // @Todo: should be larger - width: 100%; - height: 100%; - background-color: rgba(0, 0, 0, 0.54); - transition: all $speed-fast $easing; + height: 0; + z-index: 1000; + background: rgba(0, 0, 0, 0.45); + opacity: 0; + transition: opacity 0.3s, height 0s 0.3s; + + &--visible { + opacity: 1; + height: 100%; + transition: opacity 0.3s; + } } - &__dialog { - position: relative; - top: 10%; - z-index: 1001; - box-sizing: border-box; - width: 600px; - max-height: 80%; - margin: 0 auto; - border-radius: 2px; + &__container { + z-index: 1000; + top: 100px; + left: 50%; + transform: translateX(-50%); + position: fixed; + } + + &__wrapper { display: flex; flex-direction: column; - font-size: $font-size-normal; - background-color: $white; - box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1); - transition: all $speed-fast $easing; + background: use-color('white'); + border-radius: 2px; + box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); + + &--default { + width: 600px; + max-height: 600px; + min-height: 240px; + } &--large { width: 800px; + max-height: 600px; + min-height: 240px; } &--small { width: 360px; + max-height: 600px; + min-height: 240px; } } &__header { - flex: none; + font-size: $font-size-large; + color: use-color('black'); + font-weight: $font-weight-bold; + height: 54px; + box-sizing: border-box; + padding: 0 24px; display: flex; align-items: center; - height: 56px; - border-bottom: 1px solid $gray-light; - } + justify-content: space-between; + flex-shrink: 0; - &__title { - flex: 1; - margin: 0; - padding: 0 $spacer-4; - font-size: $font-size-large; - font-weight: $font-weight-semibold; - text-align: left; - color: $black; - } - - &__close { - width: 56px; - height: 56px; - font-size: $font-size-large; - line-height: 56px; - text-align: center; - color: $gray-darker; - cursor: pointer; - transition: color $speed-fast $easing; - - &:hover, - &:active { - color: $black; + &--divided { + border-bottom: 1px solid use-color('gray-20'); } } &__content { - flex: auto; + flex: 1; box-sizing: border-box; - min-height: 54px; - padding: $spacer-4; - overflow-x: hidden; - overflow-y: auto; + overflow: auto; + padding: 24px; } &__footer { - flex: none; + height: 54px; + box-sizing: border-box; + padding: 0 24px; display: flex; - border-top: 1px solid $gray-light; - padding: $spacer-3 $spacer-4; + align-items: center; justify-content: flex-end; + flex-shrink: 0; + + &--divided { + border-top: 1px solid use-color('gray-20'); + } + } + + .modal-transition { + &-enter { + opacity: 0; + transform: scale(0.4); + } + + &-enter-done { + opacity: 1; + transform: scale(1); + transition: opacity 0.3s, transform 0.3s; + } + + &-exit { + opacity: 1; + transform: scale(1); + } + + &-exit-done { + opacity: 0; + transform: scale(0.4); + transition: opacity 0.3s, transform 0.3s; + } } } diff --git a/components/nav-menu/NavMenu.js b/components/nav-menu/NavMenu.js deleted file mode 100644 index 818932500..000000000 --- a/components/nav-menu/NavMenu.js +++ /dev/null @@ -1,211 +0,0 @@ -/** - * @Author lishuaishuai+ )} + {content} + - -- ) - } -} -export default NavMenu diff --git a/components/nav-menu/__test__/index.test.js b/components/nav-menu/__test__/index.test.js deleted file mode 100644 index b2aeefec3..000000000 --- a/components/nav-menu/__test__/index.test.js +++ /dev/null @@ -1,129 +0,0 @@ -import React from 'react' -import { mount } from 'enzyme' -import NavMenu from '../' - -let wrapper -const clickCallback = jest.fn(items => items) -const options = [ - {title: 'Option 0'}, - {title: 'Option 1', disabled: true}, - {title: 'Option 2'}, - {title: 'Option 3'}, - {title: 'Option 4'} -] - -describe('NavMenu', () => { - afterEach(() => { - wrapper && wrapper.unmount() - clickCallback.mockClear() - }) - - it('基础用法', () => { - wrapper = mount( -- { this.getH = arg }}
- className={ulClasses}
- style={_verticalStyle}
- >
- {this.renderMenuItem()}
-
} - {children &&- {this.renderSubMenuItem()}
{this.rednerTabContent()}} -- - ) - // 默认激活项 - expect(wrapper.find('.hi-navmenu__item').at(2).hasClass('on')).toBeTruthy() - expect(wrapper.find('.hi-navmenu__content-item--show').text()).toEqual('2') - - // 禁止项不可点 - wrapper.find('.hi-navmenu__content-item').at(1).simulate('click') - expect(clickCallback).toHaveBeenCalledTimes(0) - - // 选中第一项 - wrapper.find('.hi-navmenu__item').at(0).simulate('click') - expect(clickCallback).toHaveBeenCalledTimes(1) - expect(wrapper.find('.hi-navmenu__item').at(0).hasClass('on')).toBeTruthy() - expect(wrapper.find('.hi-navmenu__content-item--show').text()).toEqual('0') - }) - - it('自定义渲染', () => { - const datas = [ - {title: 'Option 0'}, - {title: '点我跳转', url: 'https://www.mi.com/'}, - {title: 'Option 2', icon: 'https://www.mi.com/favicon.ico'}, - {title: 'Option 3'}, - {title: 'Option 4'} - ] - wrapper = mount( -0-1-2-3-4-{ - return data.icon ? - ) - - expect(wrapper.find('.hi-navmenu__item').find('img').props().src).toEqual('https://www.mi.com/favicon.ico') - expect(wrapper.find('.hi-navmenu__item').find('a').props().href).toEqual('https://www.mi.com/') - - // 选中第3项 - wrapper.find('.hi-navmenu__item').at(2).simulate('click') - expect(clickCallback).toHaveBeenCalledTimes(1) - expect(wrapper.find('.hi-navmenu__item').at(2).hasClass('on')).toBeTruthy() - }) - - it('二级菜单', () => { - const datas = [ - { - title: 'Option 0', - children: [ - {title: 'Option 6'}, - {title: 'Option 6'} - ] - }, - { - title: 'Option 1', - disabled: true, - children: [ - {title: 'Option 6'}, - {title: 'Option 6'} - ] - }, - { - title: 'Option 2', - children: [ - {title: 'Option 7'}, - {title: 'Option 7'} - ] - }, - { - title: 'Option 3', - children: [ - {title: 'Option 8'}, - {title: 'Option 8'} - ] - }, - { - title: 'Option 4', - children: [ - {title: 'Option 9'}, - {title: 'Option 9'} - ] - } - ] - wrapper = mount( -{data.title} : data.url ? {data.title} : data.title - }} - >
- ) - - expect(wrapper.find('.hi-navmenu__sublist').find('.hi-navmenu__sub')).toHaveLength(2) - expect(wrapper.find('.hi-navmenu__sublist').find('.hi-navmenu__sub .on')).toHaveLength(0) - wrapper.find('.hi-navmenu__sublist').find('.hi-navmenu__sub').at(1).simulate('click') - expect(wrapper.find('.hi-navmenu__sublist').find('.hi-navmenu__sub').at(1).hasClass('on')).toBeTruthy() - }) -}) diff --git a/components/nav-menu/__tests__/index.test.js b/components/nav-menu/__tests__/index.test.js deleted file mode 100644 index fd89f3f4b..000000000 --- a/components/nav-menu/__tests__/index.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import React, { Fragment } from 'react' -import { mount } from 'enzyme' -import sinon, { fake, spy } from 'sinon' -import simulant from 'simulant' -import Message from '../index' - -/* eslint-env jest */ - -describe('Message', () => { - describe('Methods', () => { - it('open&close', () => { - }) - it('deprecatedOpen', () => { - }) - }) -}) diff --git a/components/nav-menu/index.js b/components/nav-menu/index.js deleted file mode 100644 index b5206f7d3..000000000 --- a/components/nav-menu/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import NavMenu from './NavMenu' -import './style/index' - -export default NavMenu diff --git a/components/nav-menu/style/index.js b/components/nav-menu/style/index.js deleted file mode 100644 index 14dd01250..000000000 --- a/components/nav-menu/style/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import './index.scss' -import '../../style/icon/index.scss' diff --git a/components/nav-menu/style/index.scss b/components/nav-menu/style/index.scss deleted file mode 100644 index 82ec563c7..000000000 --- a/components/nav-menu/style/index.scss +++ /dev/null @@ -1,178 +0,0 @@ -@import '@hi-ui/core-css/index.scss'; - -.hi-navmenu { - position: relative; - - &__list { - border-bottom: 1px solid #e6e7e8; - height: 48px; - overflow: hidden; - padding: 0 !important; - margin: 0 !important; - - &--on { - height: auto; - } - - li { - @extend .common-li; - } - - &--vertical { - height: auto; - border-bottom: none; - - .hi-navmenu__item { - margin-right: 0 !important; - display: block !important; - padding-left: 16px !important; - padding-right: 16px !important; - - &.on { - color: #4284f5; - background: #ecf2fe; - - &::after { - display: none; - } - } - } - } - } - - &__toggle { - display: none; - box-sizing: border-box; - background-color: #fff; - position: absolute; - right: 0; - top: 12px; - width: 24px; - height: 24px; - border-radius: 2px; - border: 1px solid #d8d8d8; - cursor: pointer; - - &--show { - display: inline-block; - } - - &::before { - content: ' '; - position: absolute; - left: 50%; - top: 50%; - transform: translate3d(-50%, -50%, 0); - border: 4px solid transparent; - border-top: 4.4px solid #999; - border-bottom: none; - transition: transform 0.3s; - transform-origin: 25% 12.5%; - } - - &--on { - &::before { - transform: rotate(-180deg); - } - } - } - - &__sublist { - display: none; - - &--on { - display: block; - } - - li { - @extend .common-li; - - &--on { - &::after { - display: none; - } - } - - &:not(:last-child) { - &::before { - position: absolute; - right: -20px; - top: 50%; - transform: translate3d(0, -50%, 0); - content: ' '; - height: 10px; - width: 1px; - background-color: #d8d8d8; - } - } - } - } - - &__content { - padding: 10px; - } - - &__content-item { - display: none; - - &--show { - display: block; - } - } - - .common-li { - font-size: 14px; - color: #333; - display: inline-block; - line-height: 20px; - padding: 14px 4px; - margin-right: 40px; - position: relative; - cursor: pointer; - margin-top: 0; - - img { - vertical-align: middle; - margin-right: 5px; - } - - a { - color: #333; - } - - &:hover { - color: #4284f5; - - a { - color: #4284f5; - } - } - - &.on { - color: #4284f5; - - &::after { - position: absolute; - left: 50%; - bottom: 0; - transform: translate3d(-50%, 0, 0); - content: ' '; - height: 2px; - width: 32px; - background-color: #4284f5; - } - } - } - - &__item, - &__sub { - &--disabled { - cursor: not-allowed; - opacity: 0.5; - - &:hover { - color: #333; - } - } - } -} diff --git a/components/notice/style/index.scss b/components/notice/style/index.scss index 7b479e781..964a30703 100755 --- a/components/notice/style/index.scss +++ b/components/notice/style/index.scss @@ -1,18 +1,18 @@ -@import '@hi-ui/core-css/index.scss'; @import '../../style/icon/index.scss'; +@import '../../core-css/index.scss'; .hi-notice__container { position: absolute; top: 20px; right: 20px; z-index: 1020; - background-color: #fff; + background-color: use-color('white'); .hi-notice { padding: 10px 12px; margin-bottom: 10px; - border: 1px solid #e7e7e7; - background: #fff; + border: 1px solid use-color('gray-30'); + background: use-color('white'); transition: 0.3s ease; display: flex; align-items: flex-start; @@ -35,7 +35,7 @@ .hi-notice__content { font-size: 12px; - color: #666; + color: use-color('gray-80'); } .hi-notice-enter { diff --git a/components/notification/index.d.ts b/components/notification/index.d.ts new file mode 100644 index 000000000..840330d6e --- /dev/null +++ b/components/notification/index.d.ts @@ -0,0 +1,18 @@ +interface Options { + key: string + type?: 'info' | 'success' | 'error' | 'warning' + title?: string + content: string | JSX.Element + closeable?: boolean + duration?: number + confirmText?: string + onClose?: (e: MouseEvent) => void + onConfirm?: () => void +} +const OpenFun: (options: Options) => void +const CloseFun: (key: string) => void +declare class Notification extends React.Component - - - - +) } - renderPn () { // 上一页下一页 - const { - prefixCls, - total, - showJumper - } = this.props + renderPn () { + // 上一页下一页 + const { prefixCls, total, showJumper } = this.props const maxPage = this.calculatePage(total) const prevPager = this.renderPrevPager() const nextPager = this.renderNextPager() @@ -343,30 +386,21 @@ class Pagination extends Component { return (+{content &&{title && {title}}{content}} {onConfirm && ( -+) @@ -171,34 +181,40 @@ class Pagination extends Component { return (- { - const val = e.target.value - if (!val) { - this.setState({ - jumpTo: val - }) - return - } - if (/^\d+$/.test(val)) { - const maxPage = this.calculatePage(total) - const jumpTo = val < 1 ? 1 : (val > maxPage ? maxPage : val) - - this.setState({ - jumpTo - }) - } else { - this.setState({ - jumpTo: this.state.jumpTo - }) - } - }} /> + { + const val = e.target.value + if (!val) { + this.setState({ + jumpTo: val + }) + return + } + if (/^\d+$/.test(val)) { + const maxPage = this.calculatePage(total) + const jumpTo = val < 1 ? 1 : val > maxPage ? maxPage : val + + this.setState({ + jumpTo + }) + } else { + this.setState({ + jumpTo: this.state.jumpTo + }) + } + }} + />) } gotoPage = e => { const pageNum = parseInt(e.target.value) - const setPageNum = (page) => { + const setPageNum = page => { this.handleChange(page) this.props.onJump && this.props.onJump(Number(page)) } @@ -215,9 +231,7 @@ class Pagination extends Component { renderPagers () { const { max, total, prefixCls } = this.props - const { - current - } = this.state + const { current } = this.state const maxPage = this.calculatePage(total) const prevPager = this.renderPrevPager() // 上一页 const nextPager = this.renderNextPager() // 下一页 @@ -226,11 +240,11 @@ class Pagination extends Component { if (max * 2 + 1 + 2 >= maxPage) { leftBuffer = 1 rightBuffer = maxPage - } else if ((maxPage - current) <= max) { + } else if (maxPage - current <= max) { rightBuffer = maxPage leftBuffer = maxPage - 2 * max - 1 leftBuffer = leftBuffer <= 1 ? 1 : leftBuffer - } else if ((current - max) <= 1) { + } else if (current - max <= 1) { leftBuffer = 1 rightBuffer = 2 * max + leftBuffer + 1 rightBuffer = rightBuffer >= maxPage ? maxPage : rightBuffer @@ -240,19 +254,29 @@ class Pagination extends Component { } if (leftBuffer !== 1) { - pagers.push(this.renderPager(1, {active: current === 1})) + pagers.push(this.renderPager(1, { active: current === 1 })) } if (leftBuffer > 2) { - pagers.push(this.renderPager('...', {className: `${prefixCls}__item-break`, itemRender: breakItemRender})) + pagers.push( + this.renderPager('...', { + className: `${prefixCls}__item-break`, + itemRender: breakItemRender + }) + ) } for (let index = leftBuffer; index <= rightBuffer; index++) { - pagers.push(this.renderPager(index, {active: current === index})) + pagers.push(this.renderPager(index, { active: current === index })) } if (rightBuffer < maxPage - 1) { - pagers.push(this.renderPager('...', {className: `${prefixCls}__item-break`, itemRender: breakItemRender})) + pagers.push( + this.renderPager('...', { + className: `${prefixCls}__item-break`, + itemRender: breakItemRender + }) + ) } if (rightBuffer !== maxPage) { - pagers.push(this.renderPager(maxPage, {active: current === maxPage})) + pagers.push(this.renderPager(maxPage, { active: current === maxPage })) } pagers.push(nextPager) @@ -262,13 +286,21 @@ class Pagination extends Component { renderPrevPager () { const { prefixCls } = this.props const prevPage = this.prev() - return this.renderPager(prevPage, {className: `${prefixCls}__item-prev`, disabled: prevPage < 1}, ) + return this.renderPager( + prevPage, + { className: `${prefixCls}__item-prev`, disabled: prevPage < 1 }, ++ ) } renderNextPager () { const { prefixCls } = this.props const nextPage = this.next() - return this.renderPager(nextPage, {className: `${prefixCls}__item-next`, disabled: nextPage < 1}, ) + return this.renderPager( + nextPage, + { className: `${prefixCls}__item-next`, disabled: nextPage < 1 }, + + ) } pagerIndex = 0 @@ -291,17 +323,26 @@ class Pagination extends Component { ) } - renderNormal () { // 标准分页 - const { prefixCls, showTotal, total, localeDatas: { pagination: { total: i18nTotal } } } = this.props + renderNormal () { + // 标准分页 + const { + prefixCls, + showTotal, + total, + localeDatas: { + pagination: { total: i18nTotal } + } + } = this.props return ( - { - showTotal && + {showTotal && ( - {i18nTotal[0]}{total}{i18nTotal[1]} + {i18nTotal[0]} + {total} + {i18nTotal[1]}- } + )} {this.renderPageSizes()} {this.renderPagers()} {this.renderJumper()} @@ -309,7 +350,8 @@ class Pagination extends Component { ) } - renderSimple () { // 简单分页 + renderSimple () { + // 简单分页 const { total, prefixCls, @@ -324,18 +366,19 @@ class Pagination extends Component { {this.renderJumperInput()} {i18nSimple[1]} / - {i18nSimple[2]}{maxPage}{i18nSimple[3]}, - {total} {i18nSimple[4]} + {i18nSimple[2]} + {maxPage} + {i18nSimple[3]}, + + {total} {i18nSimple[4]} +{prevPager} - { - showJumper && + {showJumper && ( ) } render () { - const { - autoHide, - total, - type, - prefixCls, - className, - theme - } = this.props + const { autoHide, total, type, prefixCls, className, theme } = this.props const maxPage = this.calculatePage(total) - if (maxPage === 0 || (autoHide && (maxPage === 1))) { + if (maxPage === 0 || (autoHide && maxPage === 1)) { return null } let children @@ -385,7 +419,10 @@ class Pagination extends Component { } return ( -- {this.renderJumperInput()} - / - {maxPage} + {this.renderJumperInput()}/ + {maxPage}- } + )} {nextPager}+{children}) @@ -422,4 +459,4 @@ Pagination.defaultProps = { } export default Provider(Pagination) -export {Pagination} +export { Pagination } diff --git a/components/pagination/index.d.ts b/components/pagination/index.d.ts new file mode 100644 index 000000000..a6bac4d13 --- /dev/null +++ b/components/pagination/index.d.ts @@ -0,0 +1,16 @@ +export interface PaginationProps { + type?: 'default' | 'simple' | 'shrink' + defaultCurrent?: number + current?: number + max?: number + pageSize?: number + total: number + pageSizeOptions?: number[] + autoHide?: boolean + showJumper?: boolean + onJump?: (current: number) => void + onChange?: (currentPage: number, prevPage: number, pageSize: number) => void + onPageSizeChange?: (changeSize: number, currentPage: number) => void +} +declare const Pagination: React.ComponentType+export default Pagination diff --git a/components/pagination/style/index.scss b/components/pagination/style/index.scss index 705dfa8bb..22f651314 100644 --- a/components/pagination/style/index.scss +++ b/components/pagination/style/index.scss @@ -1,7 +1,7 @@ -@import '@hi-ui/core-css/index.scss'; +@import '../../core-css/index.scss'; // Define component colors -@mixin hi-pagination-style($color: get-color($palette-primary, 'hiui-blue')) { +@mixin hi-pagination-style($color: use-color('primary')) { .hi-pagination { &__item { &:not(.hi-pagination__item--disabled) { @@ -35,11 +35,9 @@ align-items: center; user-select: none; - @include component-reset(); - &__text { line-height: 32px; - color: $gray-darker; + color: use-color('gray-80'); } &__total { @@ -59,20 +57,20 @@ margin: 0 $spacer-1; .hi-select__input { - border: 1px solid $gray-light; + border: 1px solid use-color('gray-20'); } } &__jumper-input { display: inline-block; margin: 0 $spacer-5 0 $spacer-2; - color: $gray-darker; + color: use-color('gray-80'); .hi-input { width: 64px; &__inner { - border: 1px solid $gray-light; + border: 1px solid use-color('gray-20'); } &__text { @@ -103,13 +101,13 @@ min-width: 32px; padding: 0 4px; height: 32px; - border: 1px solid $gray-light; + border: 1px solid use-color('gray-20'); border-radius: 2px; font-size: $font-size-normal; line-height: 30px; text-decoration: none; text-align: center; - color: $gray-darker; + color: use-color('gray-80'); cursor: pointer; &:hover { @@ -126,12 +124,12 @@ &--disabled { > span { - border: 1px solid $gray-light; - color: $gray-light; + border: 1px solid use-color('gray-20'); + color: use-color('gray-20'); cursor: default; &:hover { - border: 1px solid $gray-light; + border: 1px solid use-color('gray-20'); } } } @@ -145,9 +143,3 @@ // Component colors @include hi-pagination-style(); - -@each $key, $value in $theme-colors { - .theme__#{$key} { - @include hi-pagination-style($value); - } -} diff --git a/components/panel/index.js b/components/panel/index.js deleted file mode 100755 index f3f1a8df7..000000000 --- a/components/panel/index.js +++ /dev/null @@ -1,40 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import classNames from 'classnames' -import './style/index' - -class Panel extends Component { - static propTypes = { - title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - footer: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - icon: PropTypes.string, - type: PropTypes.string - } - static defaultProps = { - prefixCls: 'hi-panel', - type: 'info' - } - render () { - let classnames = classNames(this.props.prefixCls, this.props.type) - const { title, footer, children, icon } = this.props - - return ( - -- ) - } -} - -export default Panel diff --git a/components/panel/style/index.js b/components/panel/style/index.js deleted file mode 100644 index 14dd01250..000000000 --- a/components/panel/style/index.js +++ /dev/null @@ -1,2 +0,0 @@ -import './index.scss' -import '../../style/icon/index.scss' diff --git a/components/panel/style/index.scss b/components/panel/style/index.scss deleted file mode 100755 index ea71b4d3a..000000000 --- a/components/panel/style/index.scss +++ /dev/null @@ -1,31 +0,0 @@ -.hi-panel { - padding: 10px; - font-size: 0; - box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1); - - .panel-title { - display: block; - height: 40px; - line-height: 40px; - padding: 0 16px; - font-size: 16px; - - .hi-icon { - margin-right: 5px; - } - } - - .panel-content { - display: block; - font-size: 14px; - padding: 16px; - border-top: 1px solid #e6e7e8; - } - - .panel-footer { - display: block; - font-size: 14px; - padding: 10px 16px; - border-top: 1px solid #e6e7e8; - } -} diff --git a/components/popover/__test__/index.test.js b/components/popover/__test__/index.test.js deleted file mode 100644 index f07883251..000000000 --- a/components/popover/__test__/index.test.js +++ /dev/null @@ -1,53 +0,0 @@ -import React from 'react' -import { mount } from 'enzyme' -import Popover from '../' -import Button from '../../button' - -const topClickTarget = mount( -- { - icon && - } - {title} --{children}- { - typeof footer !== 'undefined' && ( -{footer}- ) - } ---) -const focusRightTarget = mount( -- - ---) -const leftTarget = mount( -- - -- - -) -const bottomTarget = mount( -- - -) - -describe('Tooltip', () => { - it('触发方式测试通过', () => { - expect(document.querySelectorAll('.hi-popover__popper')).toHaveLength(0) - - topClickTarget.find('.hi-btn').getDOMNode().click() - expect(document.querySelectorAll('.hi-popover__popper')).toHaveLength(1) - - focusRightTarget.find('.hi-btn').getDOMNode().focus() - expect(document.querySelectorAll('.hi-popover__popper')).toHaveLength(2) - // focusRightTarget.find('.hi-btn').simulate('mouseenter') - }) - - it('显示的位置测试通过', () => { - topClickTarget.find('.hi-btn').getDOMNode().click() - leftTarget.find('.hi-btn').getDOMNode().click() - bottomTarget.find('.hi-btn').getDOMNode().click() - - expect(document.querySelectorAll('.hi-popper__content--top')).toHaveLength(1) - expect(document.querySelectorAll('.hi-popper__content--right')).toHaveLength(1) - expect(document.querySelectorAll('.hi-popper__content--left')).toHaveLength(1) - expect(document.querySelectorAll('.hi-popper__content--bottom')).toHaveLength(1) - }) -}) diff --git a/components/popover/index.d.ts b/components/popover/index.d.ts new file mode 100644 index 000000000..124a86acd --- /dev/null +++ b/components/popover/index.d.ts @@ -0,0 +1,9 @@ +interface Props { + title?: string | JSX.Element + content: string | JSX.Element + placement?: 'top' | 'right' | 'bottom' | 'left' + trigger?: 'click' | 'focus' | 'hover' + visible?: boolean +} +declare const Popover: React.ComponentType+export default Popover diff --git a/components/popover/index.js b/components/popover/index.js index a41c61a02..a22227dab 100644 --- a/components/popover/index.js +++ b/components/popover/index.js @@ -5,7 +5,6 @@ import classNames from 'classnames' import Popper from '../popper' import './style/index' export default class Popover extends Component { - unbindHover = true static defaultProps = { trigger: 'click', placement: 'top', @@ -18,7 +17,7 @@ export default class Popover extends Component { content: PropTypes.oneOfType([PropTypes.node, PropTypes.string]), width: PropTypes.string } - constructor (props) { + constructor(props) { super(props) this.state = { showPopper: false @@ -29,35 +28,39 @@ export default class Popover extends Component { this.delayHidePopperTimer = null } - showPopper () { + showPopper() { this.setState({ showPopper: true }) } - hidePopper () { + hidePopper() { this.setState({ showPopper: false }) } - delayHidePopper (e) { + delayHidePopper(e) { this.delayHidePopperTimer = setTimeout(() => { if (this.eventTarget !== e.target && this.isInPopover()) return this.hidePopper() }, 200) } - delayShowPopper (e) { + delayShowPopper(e) { this.delayShowPopperTimer = setTimeout(() => { this.showPopper() }, 200) } - isInPopover () { + isInPopover() { const popper = this.popperRef.current const referenceRef = ReactDOM.findDOMNode(this.referenceRef) - const bool = !this.element || this.element.contains(this.eventTarget) || - !referenceRef || referenceRef.contains(this.eventTarget) || - !popper || popper.contains(this.eventTarget) + const bool = + !this.element || + this.element.contains(this.eventTarget) || + !referenceRef || + referenceRef.contains(this.eventTarget) || + !popper || + popper.contains(this.eventTarget) this.eventTarget = null return bool } @@ -70,14 +73,14 @@ export default class Popover extends Component { } } - handlePopperMouseOut = () => { + handlePopperMouseLeave = () => { const { trigger } = this.props if (trigger === 'hover') { this.hidePopper() } } - componentDidMount () { + componentDidMount() { const { trigger } = this.props this.element = ReactDOM.findDOMNode(this) @@ -101,11 +104,11 @@ export default class Popover extends Component { this.hidePopper() }) } else if (trigger === 'hover') { - referenceRef.addEventListener('mouseenter', e => { + referenceRef.addEventListener('mouseenter', (e) => { this.eventTarget = e.target this.delayShowPopper(e) }) - referenceRef.addEventListener('mouseleave', e => { + referenceRef.addEventListener('mouseleave', (e) => { this.delayHidePopper(e) clearTimeout(this.delayShowPopperTimer) }) @@ -115,14 +118,23 @@ export default class Popover extends Component { } } - render () { - const { style, className, title, content, placement, width, visible } = this.props - const { - showPopper - } = this.state + render() { + const { style, className, title, content, placement, width, visible, overlayClassName } = this.props + const { showPopper } = this.state return ( - { this.popoverContainer = node }}> - { React.cloneElement(React.Children.only(this.props.children), { ref: (el) => { this.referenceRef = el }, tabIndex: '0' }) } +{ + this.popoverContainer = node + }} + > + {React.cloneElement(React.Children.only(this.props.children), { + ref: (el) => { + this.referenceRef = el + }, + tabIndex: '0' + })}diff --git a/components/popover/style/index.scss b/components/popover/style/index.scss index e90053669..05f15b8df 100644 --- a/components/popover/style/index.scss +++ b/components/popover/style/index.scss @@ -1,3 +1,4 @@ +@import '../../core-css/index.scss'; $popper-gap: 10px !default; $popper-arrow-gap: -5px !default; @@ -7,7 +8,7 @@ $popper-arrow-gap: -5px !default; } .hi-popover-base { - background: #fff; + background: use-color('white'); padding: 0 5px; white-space: nowrap; transition: all 0.5s; @@ -19,8 +20,8 @@ $popper-arrow-gap: -5px !default; position: absolute; width: 10px; height: 10px; - border: 1px solid #e8e8e8; - background: #fff; + border: 1px solid use-color('gray-20'); + background: use-color('white'); box-sizing: border-box; } @@ -31,7 +32,7 @@ $popper-arrow-gap: -5px !default; .hi-popover__title { padding: 5px 15px; color: #000; - border-bottom: 1px solid #e8e8e8; + border-bottom: 1px solid use-color('gray-20'); } .hi-popover__content { diff --git a/components/popper/Overlay.js b/components/popper/Overlay.js new file mode 100644 index 000000000..f05eb680b --- /dev/null +++ b/components/popper/Overlay.js @@ -0,0 +1,219 @@ +import React, { useState, useRef, useEffect, useCallback } from 'react' +import PropTypes from 'prop-types' +import classNames from 'classnames' +import _ from 'lodash' +import PopperJS from './utils/popper' +import { getOffset } from './utils/positionUtils' +import useClickOutside from './utils/useClickOutside' +import './style/index' + +const { + isFixed, + setupEventListeners, + removeEventListeners, + setStyle, + getStyleComputedProperty, + isBody +} = new PopperJS() + +const Overlay = (props) => { + const { + show, + attachEle, + children, + className, + height, + zIndex, + onMouseOver, + onMouseOut, + onMouseEnter, + onMouseLeave, + onClickOutside, + overlayClassName + } = props + const [isAddevent, setIsAddevent] = useState(false) + const [state, setState] = useState({ + offset: undefined, + popperHeight: undefined, + popperWidth: undefined, + cacheContainerPosition: 'static', + popperRef: undefined + }) + + let popperHeight + let popperWidth + const staticPopperRef = useRef() + const offsetData = useRef() + let popperContainerRef + + if (onClickOutside) { + popperContainerRef = useClickOutside( + (e) => { + onClickOutside && onClickOutside(e) + }, + undefined, + 'click', + attachEle + ) + } + + const scrollCallBack = useCallback(() => { + const offset = getOffset(props, state) + offsetData.current = offset + if (staticPopperRef) { + setState( + Object.assign({}, state, { + popperRef: staticPopperRef.current + }) + ) + } + }, [props, state]) + + useEffect(() => { + const { attachEle, container, show } = props + const { cacheContainerPosition } = state + const offset = getOffset(props, state) + offsetData.current = offset + if (staticPopperRef) { + setState( + Object.assign({}, state, { + popperRef: staticPopperRef.current + }) + ) + } + if (!show) { + // 删除滚动 + attachEle && isAddevent && removeEventListeners(attachEle) + // 判断该元素中是否含有popper如果有popper在显示 就不要删除定位 + setTimeout(() => { + if (container.querySelectorAll('.hi-popper__container').length === 0) { + container && !isBody(container) && isAddevent && setStyle(container, { position: cacheContainerPosition }) + } + }, 0) + setIsAddevent(false) + setState(Object.assign({}, state, { offset: undefined })) + } + }, [props.show]) + + // update + useEffect(() => { + const { attachEle, children, container, show } = props + if (!(attachEle && show && children)) return + + const { cacheContainerPosition, popperRef } = state + if (show && !isAddevent) { + !isAddevent && setupEventListeners(attachEle, scrollCallBack) + setIsAddevent(true) + } + // 如果在一个固定定位的元素里面的话；更改计算方式 + if (isFixed(attachEle) && !isBody(container)) { + cacheContainerPosition === 'static' && setStyle(container, { position: 'relative' }) + } + if (!popperRef) { + setState( + Object.assign({}, state, { + popperRef: staticPopperRef.current, + popperHeight: staticPopperRef.current.clientHeight, + popperWidth: staticPopperRef.current.clientWidth + }) + ) + } + }) + + useEffect(() => { + const offset = getOffset(props, state) + offsetData.current = offset + + state.popperRef && + setState( + Object.assign({}, state, { + offset: offset + }) + ) + }, [state.popperRef]) + // DidMount + useEffect(() => { + const { container } = props + setState( + Object.assign({}, state, { + cacheContainerPosition: container ? getStyleComputedProperty(container, 'position') : 'static' + }) + ) + }, []) + + if (!(attachEle && show && children)) return null + + const { offset = getOffset(props, state) } = state + const width = offset.width + const left = offset.left + 'px' + const top = offset.top + 'px' + + return ( +- { title &&{title}} -- { content } -+ {title &&{title}} +{content}++ ) +} +Overlay.defaultProps = { + show: false, + topGap: 0, + leftGap: 0, + zIndex: 1060, + placement: 'bottom-start' +} + +Overlay.propTypes = { + width: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]), // 为false时不设置 + height: PropTypes.number, + className: PropTypes.string, + show: PropTypes.bool, + topGap: PropTypes.number, + leftGap: PropTypes.number, + zIndex: PropTypes.number, + placement: PropTypes.oneOf([ + 'auto', // 会计算最合适的位置 + 'bottom', + 'bottom-start', + 'bottom-end', + 'top', + 'top-start', + 'top-end', + 'left', + 'left-start', + 'left-end', + 'right', + 'right-start', + 'right-end', + 'top-bottom-start', + 'top-bottom', + 'left-right', + 'left-right-start' + ]), + onMouseOver: PropTypes.func, + onMouseOut: PropTypes.func, + onMouseEnter: PropTypes.func, + onMouseLeave: PropTypes.func, + container: PropTypes.any, + preventOverflow: PropTypes.bool // 防止溢出 top bottom +} +export default Overlay diff --git a/components/popper/Portal.js b/components/popper/Portal.js new file mode 100644 index 000000000..48e9be28b --- /dev/null +++ b/components/popper/Portal.js @@ -0,0 +1,27 @@ +/** + * 指定挂载点 + */ +/* eslint-disable-next-line */ +import React from 'react' +import PropTypes from 'prop-types' +import ReactDOM from 'react-dom' +import useWaitForDOMRef from './utils/useWaitForDOMRef' +const getNodeName = (element) => { + return element ? (element.nodeName || '').toLowerCase() : null +} +const Portal = ({ container, children, onRendered }) => { + let resolvedContainer = useWaitForDOMRef(container, onRendered) + resolvedContainer = ['html', 'body', '#document'].includes(getNodeName(resolvedContainer)) + ? document.body + : resolvedContainer + + return children && resolvedContainer ? <>{ReactDOM.createPortal(children, resolvedContainer)} : null +} + +Portal.displayName = 'Portal' +Portal.propTypes = { + container: PropTypes.any, + onRendered: PropTypes.func +} + +export default Portal diff --git a/components/popper/index.js b/components/popper/index.js index 572f49800..8ce94d15c 100644 --- a/components/popper/index.js +++ b/components/popper/index.js @@ -1,210 +1,48 @@ -import React, { Component } from 'react' -import { render } from 'react-dom' -import PropTypes from 'prop-types' -import classNames from 'classnames' -import _ from 'lodash' -import './style/index' - -export default class Popper extends Component { - container = undefined - popperHeight = undefined - - static propTypes = { - width: PropTypes.oneOfType([PropTypes.string, PropTypes.bool, PropTypes.number]), // 为false时不设置 - height: PropTypes.number, - className: PropTypes.string, - show: PropTypes.bool, - topGap: PropTypes.number, - leftGap: PropTypes.number, - zIndex: PropTypes.number, - placement: PropTypes.oneOf(['bottom', 'bottom-start', 'top', 'top-start', 'top-end', 'left', 'right', 'right-start', 'top-bottom-start', 'top-bottom', 'bottom-end']), - onMouseOver: PropTypes.func, - onMouseOut: PropTypes.func, - onMouseEnter: PropTypes.func, - onMouseLeave: PropTypes.func - } - - static defaultProps = { - show: false, - topGap: 2, - leftGap: 2, - zIndex: 1060, - placement: 'bottom-start' - } - - componentDidUpdate (prevProps) { - if (!_.isEqual(prevProps.children.props, this.props.children.props)) { - this.forceUpdate() - } - if (prevProps.show !== this.props.show || this.props.show) { - render(this.renderChildren(), this.container) - } - } - - componentDidMount () { - this.getContainer() - if (this.props.show) { - render(this.renderChildren(), this.container) - } - } - - componentWillUnmount () { - document.body.removeChild(this.container) - } - - getOffset () { - let { - attachEle, - topGap, - leftGap, - width - } = this.props - if (!attachEle) return - const rect = attachEle.getBoundingClientRect() - let top = rect.top + (document.documentElement.scrollTop || document.body.scrollTop) - let left = rect.left + (document.documentElement.scrollLeft || document.body.scrollLeft) - width = width === false ? undefined : (width === undefined ? rect.width : width) - let placement = this.getPlacement(rect) - switch (placement) { - case 'bottom': - top = top + topGap + rect.height - left = left + leftGap + rect.width / 2 - break - case 'bottom-start': - top = top + topGap + rect.height - left = left + leftGap - break - case 'bottom-end': - top = top + topGap + rect.height - left = left + leftGap - width + rect.width - break - case 'top': - top = top - topGap - left = left + leftGap + rect.width / 2 - break - case 'top-start': - top = top - topGap - left = left + leftGap - break - - case 'top-end': - top = top - topGap - left = left + leftGap - width + rect.width - break - - case 'left': - top = top + rect.height / 2 - left = left - leftGap - break +import React, { useState, useEffect } from 'react' +import { CSSTransition } from 'react-transition-group' +import Portal from './Portal' +import Overlay from './Overlay' +import useClickOutside from './utils/useClickOutside' - case 'right': - top = top + rect.height / 2 - left = left + rect.width + leftGap - break - case 'right-start': - top = top + topGap - left = left + rect.width + leftGap - break - } - - return { - width, - top, - left, - placement - } - } - - getPlacement (attachEleRect) { - let { - attachEle, - placement, - height - } = this.props - if (!attachEle) return - const bodyHeight = document.documentElement.clientHeight || document.body.clientHeight - let poperTop = attachEleRect.top + attachEleRect.height - const caclPlacement = (bottomPlacement, topPlacement) => { // 计算popper在元素上面或下面 - placement = bottomPlacement - this.popperHeight === undefined && (this.popperHeight = 0) // 自动探测边界，第一次时需设置为不可见，否则会闪跳,用来设置class hi-popper__content--hide - if (this.popperRef || height) { // 元素已挂载到dom且当前popper处于显示状态 - if (height) { - this.popperHeight = height - } else if (this.popperRef.clientHeight && this.popperHeight !== this.popperRef.clientHeight) { - this.popperHeight = this.popperRef.clientHeight - } - poperTop += this.popperHeight - if (poperTop >= bodyHeight) { - placement = topPlacement - } - } else { // popper尚未挂载到dom，拿不到高度 - setTimeout(() => render(this.renderChildren(), this.container), 0) - } - } - - if (placement === 'top-bottom-start') { - caclPlacement('bottom-start', 'top-start') - } else if (placement === 'top-bottom') { - caclPlacement('bottom', 'top') - } - - return placement - } - - renderChildren () { - let { - attachEle, - children, - className, - show, - height, - zIndex, - onMouseOver, - onMouseOut, - onMouseEnter, - onMouseLeave - } = this.props - if (!attachEle) return - const offset = this.getOffset() - let width = offset.width - let left = offset.left + 'px' - let top = offset.top + 'px' +import './style/index' - return ( -{ + staticPopperRef.current = node + }} + className={classNames(className, 'hi-popper__content', `hi-popper__content--${offset.placement}`, { + 'hi-popper__content--hide': popperHeight === 0 || popperWidth === 0 + })} + style={{ width, height }} + onMouseOut={onMouseOut} + onMouseOver={onMouseOver} + onMouseLeave={onMouseLeave} + onMouseEnter={onMouseEnter} + > + {children} ++{ + const { show, attachEle, setOverlayContainer } = props + const [staticShow, setStaticShow] = useState(show) + const [transitionShow, setTransitionShow] = useState(show) + const [container, setContainer] = useState( + setOverlayContainer ? setOverlayContainer(attachEle) : props.container || document.body + ) + + useEffect(() => { + // const _container = attachEle ? getScrollParent(attachEle) : document.body + setContainer(setOverlayContainer ? setOverlayContainer(attachEle) : props.container || document.body) + setTransitionShow(show) + show && setStaticShow(true) + }, [show, attachEle]) + return ( ++ ) } +export { Portal, useClickOutside } +export default Popper diff --git a/components/popper/style/index.scss b/components/popper/style/index.scss index ee888811d..f45f8f7e3 100644 --- a/components/popper/style/index.scss +++ b/components/popper/style/index.scss @@ -1,3 +1,4 @@ +$AnimationClassName :'hi-popper_transition' !default; .hi-popper__container { position: absolute; @@ -47,3 +48,33 @@ } } } + +.#{$AnimationClassName} { + &-enter { + opacity: 0; + transform: scale(0.9); + } + + &-enter-active { + opacity: 1; + transform: translateX(0); + transition: opacity 300ms, transform 300ms; + } + + &-exit { + opacity: 0; + transform: translateX(100%); + transition: opacity 300ms, transform 300ms; + } + + &-exit-done { + opacity: 0; + transform: translateX(100%); + } + + &-exit-active { + opacity: 0; + transform: scale(0.9); + transition: opacity 300ms, transform 300ms; + } +} diff --git a/components/popper/utils/popper.js b/components/popper/utils/popper.js new file mode 100644 index 000000000..b3b9f8273 --- /dev/null +++ b/components/popper/utils/popper.js @@ -0,0 +1,372 @@ +const root = window +const boundariesElement = 'viewport' +export default class Popper { + /** + * 获得给定元素的外围尺寸（offset大小 + 外边距） + * @function + * @ignore + * @argument {Element} element 要检测的元素 + * @returns {Object} 包含宽高信息的对象 + */ + getOuterSizes = element => { + // 注：这里会访问 DOM + let _display = element.style.display + let _visibility = element.style.visibility + element.style.display = 'block' + element.style.visibility = 'hidden' + + // original method + // 原始方法 + var styles = root.getComputedStyle(element) // 获取计算后的样式 + var x = parseFloat(styles.marginTop) + parseFloat(styles.marginBottom) // 上下边距 + var y = parseFloat(styles.marginLeft) + parseFloat(styles.marginRight) // 左右边距 + var result = { + width: element.offsetWidth + y, + height: element.offsetHeight + x + } + + // 重置元素样式 + element.style.display = _display + element.style.visibility = _visibility + return result + } + /** + * 获得 popper 的偏移量 + * @method + * @memberof Popper + * @access private + * @param {Element} popper - popper 元素 + * @param {Element} reference - 相关元素（popper 将根据它定位） + * @returns {Object} 包含将应用于 popper 的位移信息的对象 + */ + getOffsets = (popper, reference, position, placement) => { + const { + getOffsetRectRelativeToCustomParent, + getOuterSizes, + getOffsetParent + } = this + // 获取前缀 + placement = placement.split('-')[0] + var popperOffsets = {} + + // 设置 position + popperOffsets.position = position + // 判断父元素是否固定定位 + var isParentFixed = popperOffsets.position === 'fixed' + + // + // 获取相关元素的位置 + // + var referenceOffsets = getOffsetRectRelativeToCustomParent( + reference, + getOffsetParent(popper), + isParentFixed + ) + + // + // 获取 popper 的大小 + // + var popperRect = getOuterSizes(popper) + // + // 计算 popper 的偏移 + // + // 根据 popper 放置位置的不同，我们用不同的方法计算 + if (['right', 'left'].indexOf(placement) !== -1) { + // 如果在水平方向，应当和相关元素垂直居中对齐 + // top 应当为相关元素的 top 加上二者的高度差的一半，这样才能保证垂直居中对齐 + popperOffsets.top = + referenceOffsets.top + + referenceOffsets.height / 2 - + popperRect.height / 2 + if (placement === 'left') { + // 如果在左边，则 left 应为相关元素的 left 减去 popper 的宽度 + popperOffsets.left = referenceOffsets.left - popperRect.width + } else { + // 如果在右边，则 left 应为相关元素的 right + popperOffsets.left = referenceOffsets.right + } + } else { + // 如果在垂直方向，应当和相关元素水平居中对齐 + // left 应当为相关元素的 left 加上二者的宽度差的一半 + popperOffsets.left = + referenceOffsets.left + + referenceOffsets.width / 2 - + popperRect.width / 2 + if (placement === 'top') { + // 如果在上边，则 top 应当为相关元素的 top 减去 popper 的高度 + popperOffsets.top = referenceOffsets.top - popperRect.height + } else { + // 如果在下边，则 top 应当为 相关元素的 bottom + popperOffsets.top = referenceOffsets.bottom + } + } + + // 给 popperOffsets 对象增加宽度和高度值 + popperOffsets.width = popperRect.width + popperOffsets.height = popperRect.height + + return { + popper: popperOffsets, // popper 的相关信息 + reference: referenceOffsets // 相关元素的相关信息 + } + } + + /** + * 为给定的 popper 设定样式 + * @function + * @ignore + * @argument {Element} element - 要设定样式的元素 + * @argument {Object} styles - 包含样式信息的对象 + */ + setStyle = (element, styles) => { + function isNumeric (n) { + // 是否是数字 + return n !== '' && !isNaN(parseFloat(n)) && isFinite(n) + } + Object.keys(styles).forEach(function (prop) { + var unit = '' + // 为如下的属性增加单位 + if ( + ['width', 'height', 'top', 'right', 'bottom', 'left'].indexOf(prop) !== + -1 && + isNumeric(styles[prop]) + ) { + unit = 'px' + } + element.style[prop] = styles[prop] + unit + }) + } + /** + * 初始化更新 popper 位置时用到的事件监听器 + * @method + * @memberof Popper + * @access private + */ + setupEventListeners = (element, callback) => { + // 1 DOM access here + // 注：这里会访问 DOM，原作者回复我说，这是他用来记录哪里访问到了 DOM + // this.state.updateBound = this.update.bind(this) + // 浏览器窗口改变的时候更新边界 + this.scrollCallback = () => { + callback(target) + } + root.addEventListener('resize', this.scrollCallback) + // 如果边界元素是窗口，就不需要监听滚动事件 + if (boundariesElement !== 'window') { + var target = this.getScrollParent(element) // 获取相关元素可滚动的父级 + // 这里可能是 `body` 或 `documentElement`（Firefox上），等价于要监听根元素 + if ( + target === root.document.body || + target === root.document.documentElement + ) { + target = root + } + // 监听滚动事件 + target.addEventListener('scroll', this.scrollCallback) + } + } + getNodeName (element) { + return element ? (element.nodeName || '').toLowerCase() : null + } + isBody = element => { + const { getNodeName } = this + return element + ? ['html', 'body', '#document'].includes(getNodeName(element)) + : true + } + /** + * 返回给定元素用来计算滚动的父元素 + * @function + * @ignore + * @argument {Element} element + * @returns {Element} scroll parent + */ + getScrollParent = element => { + // return document.body + + const { getStyleComputedProperty, getScrollParent, getNodeName } = this + var parent = element.parentNode + if (['html', 'body', '#document'].includes(getNodeName(element))) { + // $FlowFixMe: assume body is always available + return document.documentElement || document.body + } + if (!parent) { + // 没有父级 + return element + } + + if (parent === root.document) { + // Firefox 会将 scrollTop的判断放置的 `documentElement` 而非 `body` 上 + // 我们将判断二者谁大于0来返回正确的元素 + if (root.document.body.scrollTop) { + return root.document.body + } else { + return root.document.documentElement + } + } + + // Firefox 要求我们也要检查 `-x` 以及 `-y` + if ( + ['scroll', 'auto'].indexOf( + getStyleComputedProperty(parent, 'overflow') + ) !== -1 || + ['scroll', 'auto'].indexOf( + getStyleComputedProperty(parent, 'overflow-x') + ) !== -1 || + ['scroll', 'auto'].indexOf( + getStyleComputedProperty(parent, 'overflow-y') + ) !== -1 + ) { + // 如果检测到的 scrollParent 是 body，我们将对其父元素做一次额外的检测 + // 这样在 Chrome 系的浏览器中会得到 body，其他情况下会得到 documentElement + // 修复 issue #65 + return parent + } + return getScrollParent(element.parentNode) + } + + /** + * 判断给定元素是否固定或者在一个固定元素中 + * @function + * @ignore + * @argument {Element} element 给定的元素 + * @argument {Element} customContainer 自定义的容器 + * @returns {Boolean} + */ + isFixed = element => { + const { getStyleComputedProperty, isFixed, getNodeName } = this + + if (['html', 'body', '#document'].includes(getNodeName(element))) { + // $FlowFixMe: assume body is always available + return false + } + if (getStyleComputedProperty(element, 'position') === 'fixed') { + // position 为 fixed + return true + } + // 判断父元素是否固定 + return element.parentNode ? isFixed(element.parentNode) : element + } + /** + * 获取给定元素的 CSS 计算属性 + * @function + * @ignore + * @argument {Eement} element 给定的元素 + * @argument {String} property 属性 + */ + getStyleComputedProperty = (element, property) => { + // 注：这里会访问 DOM + const css = window.getComputedStyle(element, null) + return css[property] + } + + _getPosition = (popper, reference) => { + const { getOffsetParent, isFixed } = this + var container = getOffsetParent(reference) // 获取父元素的偏移 + + if (this._options.forceAbsolute) { + // 强制使用绝对定位 + return 'absolute' + } + + // 判断 popper 是否使用固定定位 + // 如果相关元素位于固定定位的元素中，popper 也应当使用固定固定定位来使它们可以同步滚动 + var isParentFixed = isFixed(reference, container) + return isParentFixed ? 'fixed' : 'absolute' + } + + getOffsetParent = element => { + // 注：这里会访问 DOM + var offsetParent = element.offsetParent + return offsetParent === root.document.body || !offsetParent + ? root.document.documentElement + : offsetParent + } + getOffsetRectRelativeToCustomParent = (element, parent, fixed) => { + const { getScrollParent, getBoundingClientRect } = this + var elementRect = getBoundingClientRect(element) + var parentRect = getBoundingClientRect(parent) + + if (fixed) { + // 固定定位 + var scrollParent = getScrollParent(parent) + parentRect.top += scrollParent.scrollTop + parentRect.bottom += scrollParent.scrollTop + parentRect.left += scrollParent.scrollLeft + parentRect.right += scrollParent.scrollLeft + } + + var rect = { + top: elementRect.top - parentRect.top, + left: elementRect.left - parentRect.left, + bottom: elementRect.top - parentRect.top + elementRect.height, + right: elementRect.left - parentRect.left + elementRect.width, + width: elementRect.width, + height: elementRect.height + } + return rect + } + /** + * Get bounding client rect of given element + * 获取给定元素的边界 + * @function + * @ignore + * @param {HTMLElement} element + * @return {Object} client rect + */ + getBoundingClientRect = element => { + var rect = element.getBoundingClientRect() + + // IE11以下 + var isIE = navigator.userAgent.indexOf('MSIE') !== -1 + + // 修复 IE 的文档的边界 top 值总是 0 的bug + var rectTop = + isIE && element.tagName === 'HTML' ? -element.scrollTop : rect.top + + return { + left: rect.left, + top: rectTop, + right: rect.right, + bottom: rect.bottom, + width: rect.right - rect.left, + height: rect.bottom - rectTop + } + } + + /** + * 移除更新 popper 位置时用到的事件监听器 + * @method + * @memberof Popper + * @access private + */ + removeEventListeners = element => { + const { getScrollParent } = this + + // 注：这里会访问 DOM + // 移除 resize 事件监听 + root.removeEventListener('resize', this.scrollCallback) + if (boundariesElement !== 'window') { + // 如果边界元素不是窗口，说明还监听了滚动事件 + var target = getScrollParent(element) + if ( + target === root.document.body || + target === root.document.documentElement + ) { + target = root + } + // 移除滚动事件监听 + target.removeEventListener('scroll', this.scrollCallback) + } + // 更新回调摄者为空 + this.scrollCallback = null + } + /** + * 防止overlay的合适的位置位置 在auto时候有效 + * @method + * @memberof Popper + * @ignore + * @argument {Eement} element 给定的元素 + * @argument {String} property 属性 + */ +} diff --git a/components/popper/utils/positionUtils.js b/components/popper/utils/positionUtils.js new file mode 100644 index 000000000..551cb8bbc --- /dev/null +++ b/components/popper/utils/positionUtils.js @@ -0,0 +1,207 @@ +import PopperJS from './popper' + +const { isBody, isFixed, getOffsetRectRelativeToCustomParent } = new PopperJS() +// 上下防止溢出 就会定位到划出的边缘位置 +const overflowOffset = (placement, scrollTop, rect, top, left, width, props) => { + const { topGap, container } = props + let _top = top + switch (placement) { + case 'bottom-start': + _top = rect.top + rect.height + topGap <= 0 ? scrollTop + topGap : top + break + case 'top-start': + if (container.clientHeight + rect.height - rect.bottom <= 0) { + _top = top - (rect.top - container.clientHeight) + } + break + } + return { + top: _top, + width, + left, + placement + } +} +// 对于auto的计算方式 +const positionAuto = (attachEleRect, popperHeight, popperRef, height, containerHeight) => { + // auto时候 定位比较合适的位置 + let placement = 'bottom-start' + popperHeight === undefined && (popperHeight = 0) + const width = popperRef ? popperRef.clientWidth : 0 + + if (popperRef || height) { + height && (popperHeight = height) + } else if (popperRef && popperRef.clientHeight && popperHeight !== popperRef.clientHeight) { + popperHeight = popperRef.clientHeight + } + // 上下都放不下的时候 放左右 + if (attachEleRect.top + popperHeight + attachEleRect.height > containerHeight) { + if (attachEleRect.right > width) { + placement = 'right' + } + if (attachEleRect.left > width) { + placement = 'left' + } + } else if (attachEleRect.top < popperHeight) { + if (attachEleRect.right > width) { + placement = 'right' + } + if (attachEleRect.left > width) { + placement = 'left' + } + } + // 上下能放下的时候以上下优先放置 + + if (attachEleRect.top > popperHeight) { + placement = 'top-start' + } + if (attachEleRect.top + popperHeight + attachEleRect.height < containerHeight) { + placement = 'bottom-start' + } + return placement +} +const getPlacement = (attachEleRect, container, props, state) => { + let { popperHeight, popperRef } = state + let { attachEle, placement, height, width = 0, leftGap = 0 } = props + + if (!attachEle) return + let containerHeight = document.documentElement.clientHeight || document.body.clientHeight + + if (isFixed(attachEle)) { + containerHeight = container.clientHeight + } + if (isBody(container)) { + containerHeight = document.documentElement.clientHeight || document.body.clientHeight + } + + let poperTop = attachEleRect.top + attachEleRect.height + const caclBottomOrTopPlacement = (bottomPlacement, topPlacement) => { + // 计算popper在元素上面或下面 + placement = bottomPlacement + popperHeight === undefined && (popperHeight = 0) // 自动探测边界，第一次时需设置为不可见，否则会闪跳,用来设置class hi-popper__content--hide + if (popperRef || height) { + // 元素已挂载到dom且当前popper处于显示状态 + if (height) { + popperHeight = height + } else if (popperRef.clientHeight && popperHeight !== popperRef.clientHeight) { + popperHeight = popperRef.clientHeight + } + poperTop += popperHeight + if (poperTop >= containerHeight) { + placement = topPlacement + } + } + } + const caclLeftOrRightPlacement = (leftPlacement, RightPlacement) => { + // 计算popper在元素上面或下面 + placement = leftPlacement + const _width = popperRef ? popperRef.clientWidth : width + if (attachEleRect.right > _width + leftGap) { + placement = RightPlacement + } + if (attachEleRect.left > _width + leftGap) { + placement = leftPlacement + } + } + if (placement === 'top-bottom-start') { + caclBottomOrTopPlacement('bottom-start', 'top-start') + } else if (placement === 'top-bottom') { + caclBottomOrTopPlacement('bottom', 'top') + } else if (placement === 'left-right-start') { + caclLeftOrRightPlacement('left-start', 'right-start') + } else if (placement === 'left-right') { + caclLeftOrRightPlacement('left', 'right') + } else if (placement === 'auto') { + positionAuto(attachEleRect, popperHeight, popperRef, height, containerHeight) + } + return placement || 'bottom-start' +} +export const getOffset = (props, state, status) => { + let { attachEle, topGap, leftGap, width, container, preventOverflow } = props + if (!attachEle) return + + const { popperHeight, popperWidth } = state + let rect = attachEle.getBoundingClientRect() + + if (isFixed(attachEle) && !isBody(container)) { + rect = getOffsetRectRelativeToCustomParent(attachEle, container, isFixed(attachEle)) + } + + let _scrollTop = container.scrollTop + let _scrollLeft = container.scrollLeft + // 兼容处理 + if (isBody(container)) { + _scrollTop = document.documentElement.scrollTop || document.body.scrollTop + _scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft + } + + let top = rect.top + _scrollTop + let left = rect.left + _scrollLeft + + width = width === false ? popperWidth : width === undefined ? rect.width : width + + let placement = getPlacement(rect, container, props, state) || 'bottom-start' + const rectHeight = rect.height + switch (placement) { + case 'bottom': + top = top + topGap + rectHeight + left = left + leftGap + rect.width / 2 + break + case 'bottom-start': + top = top + topGap + rectHeight + left = left + leftGap + break + case 'bottom-end': + top = top + topGap + rectHeight + left = left + leftGap - width + rect.width + break + case 'top': + top = top - topGap + left = left + leftGap + rect.width / 2 + break + case 'top-start': + top = top - topGap + left = left + leftGap + break + case 'top-end': + top = top - topGap + left = left + leftGap - width + rect.width + break + case 'left': + top = top + rect.height / 2 + left = left - leftGap + break + case 'left-start': + top = top + topGap + left = left - rect.width + break + case 'left-end': + top = top + rect.height - topGap - popperHeight + left = left - rect.width + break + + case 'right': + top = top + rect.height / 2 + left = left + rect.width + leftGap + break + case 'right-start': + top = top + topGap + left = left + rect.width + leftGap + break + case 'right-end': + top = top + rect.height - topGap - popperHeight + left = left + rect.width + leftGap + break + } + + if (preventOverflow) { + return overflowOffset((placement = 'bottom-start'), _scrollTop, rect, top, left, width, props) + } + + return { + width, + top, + left, + placement: placement + } +} diff --git a/components/popper/utils/useClickOutside.js b/components/popper/utils/useClickOutside.js new file mode 100644 index 000000000..dcffbed28 --- /dev/null +++ b/components/popper/utils/useClickOutside.js @@ -0,0 +1,28 @@ +import { useEffect, useCallback, useRef } from 'react' + +const useClickOutside = (onClickOutside, dom, eventName = 'click', attachEle) => { + const element = useRef('') + const handleOutside = useCallback( + (e) => { + const targetElement = typeof dom === 'function' ? dom() : dom + const el = targetElement || element.current + if (el) { + if (attachEle) { + !(attachEle.contains(e.target) || el.contains(e.target)) && onClickOutside(e) + } else { + !el.contains(e.target) && onClickOutside(e) + } + } + }, + [onClickOutside, dom, element] + ) + useEffect(() => { + // 使用事件捕获 + document.addEventListener(eventName, handleOutside, true) + return () => { + document.removeEventListener(eventName, handleOutside, true) + } + }, [eventName, onClickOutside, element]) + return element +} +export default useClickOutside diff --git a/components/popper/utils/useWaitForDOMRef.js b/components/popper/utils/useWaitForDOMRef.js new file mode 100644 index 000000000..0bdecc6a1 --- /dev/null +++ b/components/popper/utils/useWaitForDOMRef.js @@ -0,0 +1,39 @@ +import { useState, useEffect } from 'react' + +const ownerDocument = node => { + return (node && node.ownerDocument) || document +} +export const resolveContainerRef = ref => { + if (typeof document === 'undefined') return null + if (ref == null) return ownerDocument().body + if (typeof ref === 'function') ref = ref() + + if (ref && 'current' in ref) ref = ref.current + if (ref && ref.nodeType) return ref || null + + return null +} + +export default function useWaitForDOMRef (ref, onResolved) { + const [resolvedRef, setRef] = useState(() => resolveContainerRef(ref)) + + if (!resolvedRef) { + const earlyRef = resolveContainerRef(ref) + if (earlyRef) setRef(earlyRef) + } + + useEffect(() => { + if (onResolved && resolvedRef) { + onResolved(resolvedRef) + } + }, [onResolved, resolvedRef]) + + useEffect(() => { + const nextRef = resolveContainerRef(ref) + if (nextRef !== resolvedRef) { + setRef(nextRef) + } + }, [ref, resolvedRef]) + + return resolvedRef +} diff --git a/components/progress/BarProgress.js b/components/progress/BarProgress.js index 20b9f8100..57aa261cc 100644 --- a/components/progress/BarProgress.js +++ b/components/progress/BarProgress.js @@ -1,62 +1,47 @@ import React from 'react' import Classnames from 'classnames' -export default class BarProgress extends React.Component { - textRef = React.createRef() - state = { insidePlacement: 'right' } - - componentDidMount () { - if (this.props.placement === 'inside') { - if ( - this.textRef.current && - this.textRef.current.clientWidth >= this.getWidth() - ((this.getWidth() * this.props.percent) / 100 + 5) - ) { - this.setState({ insidePlacement: 'left' }) - } else { - this.setState({ insidePlacement: 'right' }) - } - } - } - getWidth = () => { - const { width, size } = this.props - if (!width || width <= 0) { - return size === 'large' ? 480 : 160 +export const BarProgress = (props) => { + function getWidth() { + if (!props.width || props.width <= 0) { + return props.size === 'large' ? 480 : 160 } - return width + return props.width } - getHeight = () => { - const { size, height } = this.props + + function getHeight() { + const { size, height } = props if (!height || height <= 0) { return size === 'large' ? 8 : size === 'default' ? 6 : 2 } return height } - render () { - let prefix = 'hi-progress' - const { percent: percentNum, content, type, showInfo, placement, tooltip = null, active } = this.props - const percent = percentNum > 0 ? percentNum : 0 - return ( -+- ) - } - - getContainer () { - const container = document.createElement('div') - container.style.position = 'absolute' - container.style.top = '0' - container.style.left = '0' - container.style.width = '100%' - - document.body.appendChild(container) - - this.container = container - } - - render () { - return null - } +{ + setStaticShow(false) + }} > - { - this.popperRef = node - }} - className={classNames(className, 'hi-popper__content', `hi-popper__content--${offset.placement}`, {'hi-popper__content--hide': this.popperHeight === 0})} - style={{width, height}} - onMouseOut={onMouseOut} - onMouseOver={onMouseOver} - onMouseLeave={onMouseLeave} - onMouseEnter={onMouseEnter} - > - { children } --+ + ++ --- {showInfo && placement === 'inside' && this.getHeight() >= 14 && ( -+ const prefix = 'hi-progress' + const { percent: percentNum, placement, tooltip = null, active } = props + const content = typeof props.content !== 'undefined' ? props.content : props.text // // api 兼容 1.x 为 text 2.x 改为 content + const showInfo = typeof props.showInfo !== 'undefined' ? props.showInfo : props.withOutText // // api 兼容 1.x 为 withOutText 2.x 改为 showInfo + const type = props.type || props.status + + const percent = percentNum > 0 ? percentNum : 0 + return ( +- {content || `${percent}%`} -- )} - {tooltip} -++ ) } diff --git a/components/progress/Progress.js b/components/progress/Progress.js index 9615456a8..c4a933f15 100644 --- a/components/progress/Progress.js +++ b/components/progress/Progress.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import './style' -import BarProgress from './BarProgress.js' +import { BarProgress } from './BarProgress.js' import { CircleProgress } from './CircleProgress.js' import { DashboardProgress } from './DashboardProgress' import Provider from '../context' @@ -40,9 +40,13 @@ class Progress extends Component { render () { let prefix = 'hi-progress' - const { className = '', apperance, theme } = this.props - - return+- ) - } + {showInfo && placement === 'outside' && ( ++ {showInfo && placement === 'inside' && getHeight() >= 14 && ( +- {showInfo && placement === 'outside' && ( -{content || `${percent}%`}+ )} + {tooltip}{content || `${percent}%`}- )}{content || `${percent}%`}+ )} +{this.getRenderType(apperance)}+ const { className = '', theme } = this.props + const apperance = this.props.apperance || this.props.type // api 兼容 1.x 为 type 2.x 改为 apperance + return ( ++ {this.getRenderType(apperance)} ++ ) } } export default Provider(Progress) diff --git a/components/progress/index.d.ts b/components/progress/index.d.ts new file mode 100644 index 000000000..cd03301da --- /dev/null +++ b/components/progress/index.d.ts @@ -0,0 +1,14 @@ +interface Props { + apperance?: 'bar' | 'circle' | 'dashboard' + size?: 'large' | 'default' | 'small' + active?: boolean + content?: string | JSX.Element + showInfo?: boolean + type?: 'primary' | 'success' | 'warning' | 'error' + radius?: number + placement?: 'inside' | 'outside' + width?: number + height?: number +} +declare const Progress: React.ComponentType+export default Progress diff --git a/components/progress/index.js b/components/progress/index.js index c91ed2711..5cc755de0 100644 --- a/components/progress/index.js +++ b/components/progress/index.js @@ -1,11 +1,4 @@ import Progress from './Progress' -import { depreactedPropsCompat } from '../_util' import './style/index' -export default depreactedPropsCompat([ - ['apperance', 'type'], - ['content', 'text'], - ['showInfo', 'withOutText'], - ['type', 'status'], - ['placement', 'inside', (data) => (data ? 'inside' : 'outside')] -])(Progress) +export default Progress diff --git a/components/progress/style/index.scss b/components/progress/style/index.scss index ab7d4f898..b664f4caa 100644 --- a/components/progress/style/index.scss +++ b/components/progress/style/index.scss @@ -1,15 +1,14 @@ -@import '@hi-ui/core-css/index.scss'; +@import '../../core-css/index.scss'; -$progress-bg: #f2f2f2 !default; -$progress-primary: #3b76dc !default; -$progress-success: #1da653 !default; -$progress-warn: #e19d0c !default; -$progress-error: #eb5252 !default; -$progress-text: #666 !default; +$color-map: ( + 'warn': get-color($palette-secondary, 'warning'), + 'success': get-color($palette-secondary, 'success'), + 'error': get-color($palette-secondary, 'danger') +) !default; .hi-progress { &__inner { - background-color: $progress-bg; + background-color: use-color('gray-10'); border-radius: 10px; position: relative; overflow: hidden; @@ -24,7 +23,7 @@ $progress-text: #666 !default; right: 0; bottom: 0; left: 0; - background: #fff; + background: use-color('white'); opacity: 0; content: ''; animation: hi-progress-active 2.4s cubic-bezier(0.23, 1, 0.32, 1) infinite; @@ -35,55 +34,46 @@ $progress-text: #666 !default; height: 100%; display: block; position: relative; - background-color: $progress-primary; + background-color: use-color('primary'); transition: width 0.4s cubic-bezier(0.3, 0, 0.7, 1); - } - - &__bar--success { - background-color: $progress-success; - } - &__bar--warn { - background-color: $progress-warn; - } + &--primary { + background-color: use-color('primary'); + } - &__bar--error { - background-color: $progress-error; + @each $key, $value in $color-map { + &--#{$key} { + background-color: $value; + } + } } &__text { padding-left: 25px; font-size: 14px; - color: $progress-text; + color: use-color('gray-80'); display: inline-block; vertical-align: middle; + + &--primary { + color: use-color('primary'); + } + + @each $key, $value in $color-map { + &--#{$key} { + color: $value; + } + } } &__text--inside { font-size: 14px; + color: use-color('white'); position: absolute; - right: -5px; + right: 5px; top: 50%; - transform: translate(100%, -50%); + transform: translateY(-50%); line-height: 14px; - - &.inside--left { - color: #fff; - right: 5px; - transform: translate(0, -50%); - } - } - - &__text--success { - color: $progress-success; - } - - &__text--warn { - color: $progress-warn; - } - - &__text--error { - color: $progress-error; } &__svg { @@ -113,85 +103,29 @@ $progress-text: #666 !default; &__circle { fill: none; - stroke: $progress-primary; + stroke: use-color('primary'); stroke-width: 6; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.4s cubic-bezier(0.3, 0, 0.7, 1); - } - - &__circle--success { - stroke: $progress-success; - } - &__circle--warn { - stroke: $progress-warn; - } - - &__circle--error { - stroke: $progress-error; + @each $key, $value in $color-map { + &--#{$key} { + stroke: $value; + } + } } &__dashboard { fill: none; - stroke: $progress-primary; + stroke: use-color('primary'); stroke-width: 6; transition: stroke-dasharray 0.4s cubic-bezier(0.3, 0, 0.7, 1); - } - - &__dashboard--success { - stroke: $progress-success; - } - - &__dashboard--warn { - stroke: $progress-warn; - } - - &__dashboard--error { - stroke: $progress-error; - } -} - -@each $key, $value in $theme-colors { - .theme__#{$key} { - .hi-progress__bar--primary { - background-color: $value; - } - - .hi-progress__text--primary { - color: $value; - } - .hi-progress__circle { - stroke: $value; - - &--success { - stroke: $progress-success; - } - - &--warn { - stroke: $progress-warn; + @each $key, $value in $color-map { + &--#{$key} { + stroke: $value; } - - &--error { - stroke: $progress-error; - } - } - - .hi-progress__dashboard { - stroke: $value; - } - - .hi-progress__dashboard--success { - stroke: $progress-success; - } - - .hi-progress__dashboard--warn { - stroke: $progress-warn; - } - - .hi-progress__dashboard--error { - stroke: $progress-error; } } } diff --git a/components/radio/index.d.ts b/components/radio/index.d.ts new file mode 100644 index 000000000..02a966638 --- /dev/null +++ b/components/radio/index.d.ts @@ -0,0 +1,28 @@ +type DataItem = { + content: string + id: string | number + disabled?: boolean +} +interface Props { + value?: string | number + autoFocus?: boolean + checked?: boolean + disabled?: boolean + onChange?: (event: ChangeEvent ) => void +} +interface GroupProps { + placement?: 'vertical' | 'horizontal' + data: DataItem[] + value?: string | number + defaultValue?: string | number + disabled?: boolean + type?: 'default' | 'button' + onChange?: (value: string) => void +} +declare class Group extends React.Component +} -VRadio.Group = VGroup +VRadio.Group = Group export default VRadio diff --git a/components/radio/style/index.scss b/components/radio/style/index.scss index c50162a9e..fd8ea5b1f 100644 --- a/components/radio/style/index.scss +++ b/components/radio/style/index.scss @@ -1,8 +1,8 @@ -@import '@hi-ui/core-css/index.scss'; +@import '../../core-css/index.scss'; $prefixCls: '.hi-radio' !default; -@mixin hi-radio-style($active-color: get-color($palette-primary, 'hiui-blue')) { +@mixin hi-radio-style($active-color: use-color('primary')) { &:not(#{$prefixCls}--disabled):hover { #{$prefixCls}__input { border-color: $active-color; @@ -53,8 +53,6 @@ $prefixCls: '.hi-radio' !default; height: 32px; vertical-align: middle; - @include component-reset(); - input { cursor: pointer; position: absolute; @@ -93,7 +91,7 @@ $prefixCls: '.hi-radio' !default; vertical-align: middle; width: 16px; height: 16px; - border: 1px solid #d8d8d8; + border: 1px solid use-color('gray-30'); transition: 0.3s ease-out; line-height: 1; border-radius: 50%; @@ -127,16 +125,16 @@ $prefixCls: '.hi-radio' !default; cursor: not-allowed; #{$prefixCls}__input { - border-color: #d8d8d8; - background: #f2f2f2; + border-color: use-color('gray-30'); + background: use-color('gray-10'); &::after { - background: #d8d8d8; + background: use-color('gray-30'); } } #{$prefixCls}__text { - color: rgba(#000, 0.65); + color: use-color('gray-80'); } } @@ -172,39 +170,3 @@ $prefixCls: '.hi-radio' !default; @include hi-radio-style(); } - -@each $key, $value in $theme-colors { - .theme__#{$key$prefixCls} { - @include hi-radio-style($value); - } - - .theme__#{$key}#{$prefixCls}:not(#{$prefixCls}--disabled):hover { - #{$prefixCls}__input { - border-color: $value; - } - } - - .theme__#{$key}#{$prefixCls} { - input { - &:focus + #{$prefixCls}__input { - border-color: $value; - } - } - - &__button.hi-btn { - &#{$prefixCls}__button--checked { - border-color: $value; - color: $value; - background-color: rgba($value, 0.1); - - #{$prefixCls} { - color: $value; - } - } - - &:not(.hi-btn--disabled):hover { - border-color: $value; - } - } - } -} diff --git a/components/rate/Rate.js b/components/rate/Rate.js index b96e86239..8e013a3f8 100644 --- a/components/rate/Rate.js +++ b/components/rate/Rate.js @@ -1,133 +1,147 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' +import React, { useState, useEffect } from 'react' import classnames from 'classnames' import * as Icons from './Icons' import ToolTip from '../tooltip' -class Rate extends Component { - constructor (props) { - super(props) - const { value, defaultValue } = props - this.state = { - value: value === undefined ? defaultValue : value +const Rate = (props) => { + const { + value: trueVal, + disabled, + useEmoji, + allowHalf, + character, + renderCharacter, + defaultValue, + className, + style, + count, + prefixCls, + tooltips, + color, + vertical, + onChange, + descRender, + readOnly + } = props + const clearable = props.clearable || props.allowClear // 兼容API 2.x 改为clearable + const [value, setValue] = useState(trueVal === undefined ? defaultValue : trueVal) + + const [hoverValue, setHoverValue] = useState(0) + + useEffect(() => { + if (trueVal !== undefined) { + setValue(trueVal) } - } - static getDerivedStateFromProps ({ value }) { - if (value !== undefined) { - return { - value - } + }, [trueVal]) + + const handleIconLeave = () => { + if (disabled) { + return } - return null - } - state = { - value: 0, - hoverValue: 0 + setHoverValue(0) } - renderIcon = (idx) => { - const { useEmoji, allowHalf, disabled } = this.props - const { value, hoverValue } = this.state - let currentValue = hoverValue || value - if (!allowHalf || useEmoji) { - currentValue = Math.ceil(currentValue) + + const handleIconEnter = (hoverValue) => { + if (disabled || readOnly) { + return } - return ( - - ) + + setHoverValue(hoverValue) } - handleIconClick = (value) => { - const { allowHalf, clearable, onChange, disabled } = this.props - if (disabled) { + + const handleIconClick = (valueIndex) => { + if (disabled || readOnly) { return } if (!allowHalf) { - value = Math.ceil(value) + valueIndex = Math.ceil(valueIndex) } - if (value === this.state.value && clearable) { - onChange && onChange({ value: 0 }) - this.setState({ - value: 0 - }) + if (valueIndex === value && clearable) { + onChange && onChange(0) + if (trueVal === undefined) { + setValue(0) + } return } - onChange && onChange(value) - this.setState({ value }) - } - handleIconEnter = (hoverValue) => { - if (this.props.disabled) { - return + + if (trueVal === undefined) { + setValue(valueIndex) } - this.setState({ hoverValue }) + onChange && onChange(valueIndex) } - handleIconLeave = () => { - if (this.props.disabled) { - return + + const renderIcon = (idx) => { + let currentValue = hoverValue || value + if (!allowHalf) { + currentValue = Math.ceil(currentValue) } - this.setState({ hoverValue: 0 }) - } - render () { - const { - className, - style, - count, - useEmoji, - prefixCls, - tooltips, - disabled - } = this.props - const iconCount = Math.ceil(useEmoji ? 5 : count) - const iconHalfCls = `${prefixCls}__star__half` - const starCls = classnames(`${prefixCls}__star`, { - [`${prefixCls}__star--disabled`]: disabled - }) return ( - -
+
+ ) + } + + const currentValue = hoverValue || value + const iconCount = Math.ceil(useEmoji ? 5 : count) + const iconHalfCls = `${prefixCls}__star__half` + const starCls = classnames(`${prefixCls}__star`, { + [`${prefixCls}__star--disabled`]: disabled, + [`${prefixCls}__star--readOnly`]: readOnly + }) + + const descCls = classnames(`${prefixCls}__desc`) + + return ( + ++ ) } Rate.defaultProps = { @@ -136,36 +150,42 @@ Rate.defaultProps = { count: 5, prefixCls: 'hi-rate', tooltips: [], - onChange: () => { } + desc: [], + onChange: () => {}, + style: { + fontSize: 24 + }, + color: '#FFCA28', + vertical: false } -function ToolTipWrapper ({ children, title }) { +function ToolTipWrapper({ children, title }) { return title ?-
{Array(iconCount)
.fill()
.map((_, idx) => {
- const value = idx + 1
- const halfValue = idx + 0.5
+ const indexValue = idx + 1
+ const halfValue = allowHalf ? idx + 0.5 : indexValue
return (
{children} : children } -function Icon ({ value, currentValue, disabled, useEmoji, allowHalf }) { +function Icon({ value, currentValue, disabled, useEmoji, allowHalf, character, renderCharacter, readOnly }) { + if (renderCharacter) { + return renderCharacter(currentValue, value) + } + if (character) { + return character + } if (useEmoji) { const emojiValue = currentValue > 5 ? 5 : currentValue - const Emojis = [ - Icons.EmojiOne, - Icons.EmojiTwo, - Icons.EmojiThree, - Icons.EmojiFour, - Icons.EmojiFive - ] + const Emojis = [Icons.EmojiOne, Icons.EmojiTwo, Icons.EmojiThree, Icons.EmojiFour, Icons.EmojiFive] if (value <= emojiValue) { return React.createElement(Emojis[emojiValue - 1]) } else { return} } + if (value <= currentValue) { return } else if (value === currentValue + 0.5 && allowHalf) { - return disabled ? : + return disabled || readOnly ? : } else { - return disabled ? : + return disabled || readOnly ? : } } - export default Rate diff --git a/components/rate/index.d.ts b/components/rate/index.d.ts new file mode 100644 index 000000000..c4465fdeb --- /dev/null +++ b/components/rate/index.d.ts @@ -0,0 +1,18 @@ +interface Props { + clearable?: boolean + allowHalf?: boolean + useEmoji?: boolean + disabled?: boolean + count?: number + readOnly?: boolean + defaultValue?: number + value?: number + tooltips?: string[] + descRender?: (value: number, index: number) => JSX.Element + character?: string | JSX.Element + color?: string + characterRender?: (value: number, index: number) => JSX.Element + onChange?: (value: number) => void +} +declare const Rate: React.ComponentType +export default Rate diff --git a/components/rate/index.js b/components/rate/index.js index af3fdbcdf..a837784b6 100644 --- a/components/rate/index.js +++ b/components/rate/index.js @@ -1,5 +1,4 @@ import './style/index' import Rate from './Rate' -import { depreactedPropsCompat } from '../_util' -export default depreactedPropsCompat([['clearable', 'allowClear']])(Rate) +export default Rate diff --git a/components/rate/style/index.scss b/components/rate/style/index.scss index cd1bada15..b66a461b7 100644 --- a/components/rate/style/index.scss +++ b/components/rate/style/index.scss @@ -14,8 +14,6 @@ display: inline-block; transition: 0.3s ease; margin: 0 6px !important; - width: $w; - height: $h; &:active, &:hover { @@ -30,35 +28,76 @@ } } + &--readOnly { + cursor: auto; + + &:hover { + transform: none; + } + } + &__half { - height: 100%; width: 50%; display: inline-block; - position: absolute; z-index: 1; + &.grayscale { + filter: grayscale(100%); + } + &--wrapper { position: absolute; top: 0; left: 0; - height: $h; - width: $w; + } + + &--left { + width: 50%; + position: absolute; + z-index: 10; + overflow: hidden; } &--right { right: 0; + width: 100%; + } + + &--top { + height: 50%; + position: absolute; + z-index: 10; + width: 100%; + overflow: hidden; + } + + &--bottom { + top: 0; + width: 100%; + height: 100%; } } } + &__desc { + margin-left: 14px; + display: flex; + padding-top: 4px; + } + &__icon { display: inline-block; - width: 100%; - height: 100%; + width: $w; + height: $h; svg { - width: 100%; - height: 100%; + width: $w; + height: $h; } } + + &__outter { + display: flex; + flex-direction: row; + } } diff --git a/components/rich-text-editor/index.js b/components/rich-text-editor/index.js new file mode 100644 index 000000000..44caca3dd --- /dev/null +++ b/components/rich-text-editor/index.js @@ -0,0 +1,46 @@ +import React, { forwardRef } from 'react' +import classNames from 'classnames' + +import ReactQuill from 'react-quill' + +import Tooltip from '../tooltip' +import './style/index' + +const QuillBarTooltip = (props) => { + const { toolbarsName, tooltipTitle, children, showTooltip = true } = props + return ( + + {showTooltip ? ( + + {children || } + + ) : ( ++ {children || } ++ )} + + ) +} +const InternalQuill = (props) => { + const { className, innerRef, theme } = props + + return ( +{ + innerRef && (innerRef.current = el) + }} + className={classNames({ + 'hi-quill-content': !theme, + className + })} + /> + ) +} + +const RichTextEditor = forwardRef((props, ref) => { + return +}) +export default RichTextEditor +export { QuillBarTooltip } diff --git a/components/rich-text-editor/style/index.js b/components/rich-text-editor/style/index.js new file mode 100644 index 000000000..67206756d --- /dev/null +++ b/components/rich-text-editor/style/index.js @@ -0,0 +1,4 @@ +import 'react-quill/dist/quill.snow.css' +import 'react-quill/dist/quill.bubble.css' +import 'react-quill/dist/quill.core.css' +import './index.scss' diff --git a/components/rich-text-editor/style/index.scss b/components/rich-text-editor/style/index.scss new file mode 100644 index 000000000..1bff4c17d --- /dev/null +++ b/components/rich-text-editor/style/index.scss @@ -0,0 +1,116 @@ +@import '../../core-css/index.scss'; + +.hi-quill-content, +.hi-quill-toolbar-tooltip { + .hi-quill-custom { + display: inline-block; + } + + .ql-toolbar, + .hi-quill-toolbar { + button, + .ql-color-picker { + width: 32px; + height: 32px; + border-radius: 2px; + text-align: center; + transition: all 0.3s; + line-height: 32px; + + &:hover { + background-color: use-color('primary-20'); + } + + svg { + float: none; + height: 16px; + } + } + + .ql-picker { + height: 32px; + line-height: 30px; + border-radius: 2px; + border: 1px solid transparent; + + &:focus { + outline: none; + } + + &-label:focus { + border-color: transparent; + outline: none; + } + + &.ql-expanded .ql-picker-label { + border-color: transparent; + } + + &:hover { + border: 1px solid use-color('primary'); + } + + &-options { + padding: 4px 0; + + .ql-picker-item { + &:hover { + background-color: use-color('primary-20'); + } + + &:focus { + outline: none; + } + } + } + } + + .ql-font, + .ql-size, + .ql-header { + .ql-picker-options { + .ql-picker-item { + padding-left: 8px; + padding-right: 8px; + } + } + } + + .ql-formats { + &::after { + content: '|'; + float: right; + margin-left: 15px; + color: use-color('gray-50'); + clear: none; + line-height: 32px; + } + } + } + + .hi-upload { + display: inline-block; + + button { + width: auto; + background-color: use-color('primary'); + color: use-color('white'); + padding: 4px 15px; + line-height: 22px; + + &:hover { + background-color: use-color('primary-60'); + color: use-color('white'); + } + } + } +} + +.hi-quill-toolbar-tooltip { + display: inline-block; + height: 32px; +} + +.ql-container { + min-height: 120px; +} diff --git a/components/search/index.d.ts b/components/search/index.d.ts new file mode 100644 index 000000000..4303b0823 --- /dev/null +++ b/components/search/index.d.ts @@ -0,0 +1,20 @@ +type Item = { + id: string | number + title: string | JSX.Element +} +interface DataItem extends Item{ + children?: Item[] +} +interface Props { + prepend?: string | JSX.Element + append?: JSX.Element + disabled?: boolean + loading?: boolean + placeholder?: string + data?: DataItem + onSearch?: (inputVal: string, item?: DataItem) => void + onChange?: (e: React.ChangeEvent ) => void + overlayClassName?: string +} +declare const Search: React.ComponentType +export default Search diff --git a/components/search/index.js b/components/search/index.js new file mode 100644 index 000000000..85000662c --- /dev/null +++ b/components/search/index.js @@ -0,0 +1,124 @@ +import React, { useState, useRef, useEffect, useCallback } from 'react' +import Input from '../input' +import Button from '../button' +import SearchDropdown from './searchDropdown' +import Provider from '../context' + +import './style' + +const prefixCls = 'hi-search' + +const Search = ({ + onChange, + onSearch, + style, + placeholder, + prepend, + disabled, + data, + value, + loading, + localeDatas, + overlayClassName, + append, + theme +}) => { + const [dropdownShow, setDropdownShow] = useState(false) + const searchInputContainer = useRef(null) + const [inputVal, setInputVal] = useState(value || '') + + useEffect(() => { + setInputVal(value) + }, [value]) + + const closeDropdown = () => { + setDropdownShow(false) + } + + const optionsClick = useCallback( + (value, item) => { + setInputVal(value) + setDropdownShow(false) + onSearch && onSearch(value, item) + }, + [onSearch] + ) + + return ( + ++ ) +} + +Search.defaultProps = { + style: { width: 200 }, + loading: false +} +export default Provider(Search) diff --git a/components/search/searchDropdown.js b/components/search/searchDropdown.js new file mode 100644 index 000000000..8fe803490 --- /dev/null +++ b/components/search/searchDropdown.js @@ -0,0 +1,130 @@ +import React, { useRef, useEffect, useState, useCallback } from 'react' +import classNames from 'classnames' +import Popper from '../popper' +import Loading from '../loading' + +const SearchDropdown = ({ + data, + prefixCls, + optionsClick, + inputVal = '', + dropdownShow, + searchInputContainer, + localeDatas, + theme, + onClickOutside, + loading, + overlayClassName +}) => { + const popperDropdown = useRef(null) + const [dropdownData, setDropdownData] = useState(data) + + useEffect(() => { + setDropdownData(data) + }, [data]) + + const highlightKeyword = useCallback( + (title, uniqueKey) => { + const searchbarValue = String(inputVal) + let keyword = inputVal + keyword = searchbarValue.includes('[') ? keyword.replace(/\[/gi, '\\[') : keyword + keyword = searchbarValue.includes('(') ? keyword.replace(/\(/gi, '\\(') : keyword + keyword = searchbarValue.includes(')') ? keyword.replace(/\)/gi, '\\)') : keyword + + const parts = title.split(new RegExp(`(${keyword})`, 'gi')) + return inputVal && inputVal.length > 0 ? ( ++ { + const evt = window.event || e + if (evt.keyCode === 13) { + onSearch && onSearch(inputVal) + } + }} + onFocus={() => { + data && data.length > 0 && setDropdownShow(true) + }} + onChange={(e) => { + const { value } = e.target + setInputVal(value) + data && value.length > 0 && setDropdownShow(true) + onChange && onChange(value) + }} + /> + {append ? ( + { + e.preventDefault() + setDropdownShow(true) + onSearch && onSearch(inputVal) + }} + > + {append} + + ) : ( ++ {data && ( +{ + closeDropdown() + }} + data={data} + loading={loading} + dropdownShow={dropdownShow} + localeDatas={localeDatas} + theme={theme} + searchInputContainer={searchInputContainer} + /> + )} + + {parts.map((part) => + part === searchbarValue ? ( + + {part} + + ) : ( + part + ) + )} +
+ ) : ( + title + ) + }, + [inputVal] + ) + const ItemChildren = useCallback( + (item) => { + return ( +-
+ {item.children &&
+ item.children.map((ele) => {
+ return (
+
+ + ) +} + +export default SearchDropdown diff --git a/components/search/style/index.js b/components/search/style/index.js new file mode 100644 index 000000000..63810a681 --- /dev/null +++ b/components/search/style/index.js @@ -0,0 +1 @@ +import './index.scss' diff --git a/components/search/style/index.scss b/components/search/style/index.scss new file mode 100644 index 000000000..a31b74f85 --- /dev/null +++ b/components/search/style/index.scss @@ -0,0 +1,127 @@ +@import '../../core-css/index.scss'; +$search: 'hi-search' !default; + +.#{$search} { + display: inline-block; + + &_input { + display: flex; + + .hi-input__inner { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + + &:hover { + .hi-btn { + border-left-color: transparent; + } + } + } + + .hi-btn { + border-left-color: transparent; + border-top-left-radius: 0; + border-bottom-left-radius: 0; + + &:hover:not(.disabled) { + border-color: use-color('primary'); + } + + &:focus { + box-shadow: none; + } + } + } + + .hi-icon.icon-search { + color: use-color('primary'); + } + + &_dropdown { + ul { + margin: 0; + padding: 0; + } + + li { + margin: 0; + list-style: none; + } + + p { + margin: 0; + padding: 0; + } + + width: 100%; + height: 252px; + font-size: 12px; + color: use-color('black'); + overflow-x: hidden; + overflow-y: auto; + background-color: use-color('white'); + box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); + border-radius: 2px; + box-sizing: border-box; + text-align: left; + margin-top: -4px; + + &--item { + flex: none; + display: block; + line-height: 36px; + margin: 0; + font-weight: 400; + cursor: pointer; + list-style: none; + transition: all 0.3s ease; + text-overflow: ellipsis; + white-space: nowrap; + + &_normal { + display: block; + line-height: 36px; + padding: 0 12px; + + &:hover:not(.hi-search_dropdown--item-title) { + background-color: use-color('primary-20'); + } + } + + &-title { + color: use-color('gray-50'); + font-size: 14px; + } + + &-history { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 12px; + color: use-color('gray-50'); + font-size: 14px; + } + + &-nodata { + height: 260px; + line-height: 260px; + text-align: center; + color: use-color('gray-50'); + font-size: 14px; + } + + &__name-hightlight { + color: use-color('primary'); + } + } + + &--more { + line-height: 36px; + margin: 0; + font-weight: 400; + cursor: pointer; + font-size: 12px; + text-align: center; + } + } +} diff --git a/components/select-tree/SelectTreeHook.js b/components/select-tree/SelectTreeHook.js new file mode 100644 index 000000000..806ca4c4a --- /dev/null +++ b/components/select-tree/SelectTreeHook.js @@ -0,0 +1,441 @@ +import React, { useState, useRef, useCallback, useEffect } from 'react' +import Tree from './components/tree' +import _ from 'lodash' +import Popper from '../popper' +import HiRequest from '../_util/hi-request' +import Icon from '../icon' + +import { + flattenNodesData, + getNode, + updateCheckData, + updateUnCheckData, + hasChildren, + parseDefaultSelectedItems, + parseCheckStatusData, + parseSelectedItems, + treeFilterByOriginalData, + parseExpandIds, + fillNodeEntries, + clearReturnData, + processSelectedIds +} from './components/tree/util' +import NavTree from './components/tree/NavTree' +import Trigger from './components/Trigger' +import Provider from '../context' + +const SelectTree = ({ + data, + dataSource, + type, + defaultExpandIds, + expandIds: expandIdsProps, + defaultExpandAll, + showCheckedMode, + defaultValue, + value, + onChange, + onExpand, + defaultLoadData, + clearable, + searchMode, + mode, + autoExpand, + overlayClassName, + theme, + localeDatas +}) => { + const selectedItemsRef = useRef() + const inputRef = useRef() + // select 中显示的数量 + const [showCount, setShowCount] = useState(1) + // panel show + const [show, setShow] = useState(false) + // panel status : empty normal loading + const [nodeDataState, setNodeDataState] = useState('normal') + // selected items + const [selectedItems, setSelectedItems] = useState([]) + // expand ids + const [expandIds, setExpandIds] = useState([]) + // 改造过后的数据 + const [nodeEntries, setNodeEntries] = useState({}) + // 选中的节点数据（checkable） + const [checkedNodes, setCheckedNodes] = useState({ + checked: [], + semiChecked: [] + }) + // 拉平的数据 + const [flattenData, setFlattenData] = useState([]) + // 关键字搜索值 + const [searchValue, setSearchValue] = useState('') + // 清空搜索值事件 + const clearSearchEvent = useCallback(() => { + setSearchValue('') + searchTreeNode('') + }, [flattenData]) + + // 搜索框的值改变时的事件 + const changeEvents = useCallback( + (e) => { + const val = e.target.value + setSearchValue(val) + searchTreeNode(val) + }, + [flattenData] + ) + // 根据传入的原始数据解析为拉平数据及改装数据 + useEffect(() => { + setStatus() + if (data) { + const result = flattenNodesData( + data, + defaultExpandIds, + defaultExpandAll, + type === 'multiple' && showCheckedMode !== 'ALL' + ) + setFlattenData(result.flattenData) + setNodeEntries(result.nodeEntries) + } + }, [data]) + // 依赖 flattenData & value 解析生成 checkedNodes 或 selectedItems + useEffect(() => { + if (flattenData.length > 0) { + if (type === 'multiple') { + const cstatus = parseCheckStatusData(defaultValue.length > 0 ? defaultValue : value, checkedNodes, flattenData) + if (cstatus) { + setCheckedNodes(cstatus) + } + } else { + const _selectedItems = parseDefaultSelectedItems(defaultValue.length > 0 ? defaultValue : value, flattenData) + setSelectedItems(_selectedItems) + } + } + }, [value, flattenData]) + // 当选中项发生改变时(以及首次解析完成默认值后)，更改选中项 + useEffect(() => { + const _selectedItems = parseSelectedItems(checkedNodes, nodeEntries, showCheckedMode, flattenData) + setSelectedItems(_selectedItems) + }, [checkedNodes]) + + // 依赖展开项生成展开节点数据 + useEffect(() => { + if (flattenData.length > 0) { + const _expandIds = parseExpandIds(expandIdsProps, defaultExpandIds, flattenData) + setExpandIds((preExpandIds) => { + return (_expandIds || []).concat(preExpandIds || []) + }) + } + }, [expandIdsProps, flattenData]) + + useEffect(() => { + if (selectedItemsRef.current) { + const sref = selectedItemsRef.current + // 多选超过一行时以数字显示 + const referenceEls = sref.querySelectorAll('.hi-selecttree__selected--hidden span') + const wrapperWidth = sref.getBoundingClientRect() + let _width = 0 + let num = 0 + for (const el of referenceEls) { + const elRect = el.getBoundingClientRect() + _width += elRect.width + // 16 -- '+1' width + if (_width + 16 > wrapperWidth.width) { + break + } + num++ + } + setShowCount(num) + } + }, [selectedItems]) + + // 过滤方法 + const searchTreeNode = (val) => { + const matchNodes = [] + const _data = _.cloneDeep(flattenData) + if (searchMode === 'highlight') { + const filterArr = _data.map((node) => { + let _keyword = val + _keyword = val.includes('[') ? _keyword.replace(/\[/gi, '\\[') : _keyword + _keyword = val.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword + _keyword = val.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword + const reg = new RegExp(_keyword, 'gi') + const str = `${val}` + if (reg.test(node.title)) { + node._title = node.title.replace(reg, str) + matchNodes.push(node) + } + return node + }) + setFlattenData(filterArr) + let matchNodesSet = [] + matchNodes.forEach((mn) => { + matchNodesSet.push(mn.id) + matchNodesSet = matchNodesSet.concat(mn.ancestors || []) + }) + matchNodesSet = _.uniq(matchNodesSet) + setExpandIds(matchNodesSet) + } else if (searchMode === 'filter') { + const filterArr = treeFilterByOriginalData(data, val) + const filterData = flattenNodesData(filterArr).flattenData + let matchNodesSet = [] + filterData.forEach((mn) => { + matchNodesSet.push(mn.id) + matchNodesSet = matchNodesSet.concat(mn.ancestors || []) + }) + matchNodesSet = _.uniq(matchNodesSet) + setExpandIds(matchNodesSet) + setFlattenData(filterData) + } + } + + /** + * Clear button Event + */ + const handleClear = useCallback(() => { + setSelectedItems([]) + setExpandIds([]) + setCheckedNodes({ + checked: [], + semiChecked: [] + }) + }, []) + + /** + * set Pull Data status + */ + const setStatus = useCallback(() => { + if (data.length === 0) { + setNodeDataState(dataSource ? 'loading' : 'empty') + } else { + setNodeDataState('normal') + } + }, [data]) + /** + * Remote load Data + * @param {*} id click node's id + */ + const loadNodes = useCallback((id) => { + const _dataSource = typeof dataSource === 'function' ? dataSource(id || '') : dataSource + return HiRequest({ + ..._dataSource + }).then((res) => { + const nArr = res.data.map((n) => { + return { + ...n, + pId: id + } + }) + return nArr + }) + }, []) + /** + * 多选模式下复选框事件 + * @param {*} checked 是否被选中 + * @param {*} node 当前节点 + */ + const checkedEvents = (checked, node) => { + let result = {} + const semiCheckedIds = new Set(checkedNodes.semiChecked) + const checkedIds = new Set(checkedNodes.checked) + if (checked) { + result = updateCheckData(node, flattenData, checkedIds, semiCheckedIds) + } else { + result = updateUnCheckData(node, flattenData, checkedIds, semiCheckedIds) + } + setCheckedNodes({ + checked: result.checked, + semiChecked: result.semiChecked + }) + let checkedArr = [] + if (result.checked.length > 0) { + checkedArr = result.checked.map((id) => { + return getNode(id, flattenData) + }) + } + onChange( + processSelectedIds(result.checked, nodeEntries, showCheckedMode, flattenData), + clearReturnData(checkedArr), + clearReturnData(node) + ) + } + + /** + * 节点展开关闭事件 + * @param {*} bol 是否展开 + * @param {*} node 当前点击节点 + */ + const expandEvents = (node, state, callback = () => {}) => { + const _expandIds = [...expandIds] + const hasIndex = _expandIds.findIndex((id) => id === node.id) + if (hasIndex !== -1) { + _expandIds.splice(hasIndex, 1) + } else { + _expandIds.push(node.id) + } + setExpandIds(_expandIds) + if (hasChildren(node, flattenData)) { + // 如果包含节点，则不再拉取数据 + callback() + onExpand() + return + } + if (state) { + loadNodes(node.id).then((res) => { + if (res.length > 0) { + setFlattenData(flattenData.concat(flattenNodesData(res).flattenData)) + fillNodeEntries(node, nodeEntries, res) + } + // callback(res) + }) + onExpand() + } + } + + /** + * Node selected Event + */ + const selectedEvents = useCallback((node) => { + setSelectedItems([node]) + const n = clearReturnData(node) + onChange(node.id, n, n) + setShow(false) + }, []) + + /** + * Input 点击事件 + */ + const onTrigger = () => { + if (flattenData.length === 0 && defaultLoadData && (!data || data.length === 0 || dataSource) && !show) { + // data 为空 且 存在 dataSource 时，默认进行首次数据加载.defaultLoadData不暴露 + setNodeDataState('loading') + loadNodes() + .then((res) => { + if (res.length === 0) { + setNodeDataState('empty') + return + } + setNodeDataState('normal') + setFlattenData(flattenNodesData(res).flattenData) + fillNodeEntries(null, nodeEntries, res) + }) + .catch(() => { + setNodeDataState('empty') + }) + } + setShow(!show) + } + const searchable = searchMode === 'filter' || searchMode === 'highlight' + return ( ++ +++-
+ {dropdownData && dropdownData.length > 0 ? (
+ dropdownData.map((item) => {
+ return DataSourceRender(item)
+ })
+ ) : (
+
++ ) +} + +SelectTree.defaultProps = { + type: 'single', + defaultCheckedIds: [], + defaultValue: [], + value: [], + data: [], + clearable: true, + onChange: () => {}, + onExpand: () => {}, + checkable: false, + defaultLoadData: true, + showCheckedMode: 'PARENT', + defaultExpandAll: false, + defaultExpandIds: [], + expandIds: [], + mode: 'tree', + searchMode: null +} +export default Provider(SelectTree) diff --git a/components/select-tree/components/Trigger.jsx b/components/select-tree/components/Trigger.jsx new file mode 100644 index 000000000..50a9f5615 --- /dev/null +++ b/components/select-tree/components/Trigger.jsx @@ -0,0 +1,72 @@ +import React from 'react' +import classNames from 'classnames' + +const Trigger = ({ + inputRef, + type, + selectedItems, + onTrigger, + checkedEvents, + onClear, + showCount, + clearable, + show, + selectedItemsRef +}) => { + return ( ++ { + setShow(false)} + > + + } + {/*+ {searchable && mode !== 'breadcrumb' && ( ++++ )} + {mode === 'breadcrumb' ? ( ++++ { + if (e.keyCode === '13') { + searchTreeNode(e.target.value) + } + }} + onChange={changeEvents} + /> + {searchValue.length > 0 ? ( + + ) : null} + + ) : ( + + )} + */} + ++ ) +} + +export default Trigger diff --git a/components/select-tree/components/tree/LoadingIcon.jsx b/components/select-tree/components/tree/LoadingIcon.jsx new file mode 100644 index 000000000..84346c230 --- /dev/null +++ b/components/select-tree/components/tree/LoadingIcon.jsx @@ -0,0 +1,32 @@ +import React from 'react' + +const IconLoading = (props) => { + const size = '0.8em' + const themeColor = { + orange: '#f63', + cyan: '#46bc99', + magenta: '#ff5975', + lavender: '#b450de', + blue: '#3da8f5', + purple: '#8a8acb' + } + return ( + + + + ) +} +export default IconLoading diff --git a/components/select-tree/components/tree/NavTree.js b/components/select-tree/components/tree/NavTree.js new file mode 100644 index 000000000..9a17d7051 --- /dev/null +++ b/components/select-tree/components/tree/NavTree.js @@ -0,0 +1,155 @@ +import React, { useState, useRef, useEffect, useCallback } from 'react' +import Icon from '../../../icon' +import { getRootNodes, getChildrenNodes } from './util' +import classNames from 'classnames' +import Loading from '../../../loading' +import Checkbox from '../../../checkbox' + +const Bread = ({ datas, onClick, onReturnClick, localeDatas }) => { + const datasArr = Object.keys(datas) + datasArr.unshift(localeDatas.selectTree.back) + if (datasArr.length > 3) { + datasArr.splice(1, datasArr.length - 3, '...') + } + return ( +++ + + 0 + })} + /> + {clearable && selectedItems.length > 0 && ( + + )} + ++ {selectedItems.map((node, index) => ( + {node.title || ''} + ))} ++ {selectedItems.length > 0 && + selectedItems.slice(0, showCount || 1).map((node, index) => { + return ( +++ ) + })} + {!!showCount && showCount < selectedItems.length && ( +{node ? node.title : ''}+ {type === 'multiple' && ( + { + e.stopPropagation() + checkedEvents(false, node) + }} + > + + + )} ++ +{selectedItems.length - showCount} ++ )} ++ {datasArr.map((item, index) => { + const cls = classNames( + 'hi-breadtree__bread-content', + datasArr.length > 3 && index === 1 && 'hi-breadtree__bread-content--normal' + ) + return ( ++ ) +} +const NavTree = ({ + data, + checkable, + checkedNodes, + onCheck, + onSelected, + selectedItems, + autoExpand = true, + nodeDataState, + onExpand: expandProps, + localeDatas +}) => { + const expandData = useRef() + const [renderData, setRenderData] = useState([]) + const [fullBreadData, setFullBreadData] = useState({}) + const [loadingState, setLoadingState] = useState('normal') + const [currentNode, setCurrentNode] = useState(null) + + useEffect(() => { + setLoadingState(nodeDataState) + }, [nodeDataState]) + + useEffect(() => { + const roots = currentNode ? getChildrenNodes(currentNode, data) : getRootNodes(data) + setRenderData(roots) + }, [data]) + const onBreadClick = (title) => { + const node = fullBreadData[title] + setRenderData(getChildrenNodes(node, data)) + setFullBreadData((preData) => { + const keysArr = Object.keys(preData) + const delArr = keysArr.filter((_, index) => index > keysArr.indexOf(title)) + delArr.forEach((key) => { + delete preData[key] + }) + return preData + }) + } + const onReturnClick = useCallback(() => { + setLoadingState('normal') + setRenderData(getRootNodes(data)) + setFullBreadData({}) + }) + const onNodeClick = (node, children) => { + if (node.isLeaf) { + onSelected(node) + return + } + expandData.current = expandData.current ? expandData.current.concat([node]) : [].concat([node]) + setFullBreadData((preData) => { + return { + ...preData, + [node.title]: node + } + }) + setCurrentNode(node) + if (children.length > 0) { + setRenderData(children) + } else { + setRenderData([]) + setLoadingState('loading') + expandProps(node, true, (arg) => { + setLoadingState(arg.length > 0 ? 'normal' : 'empty') + }) + } + } + return ( ++ { + index === 0 + ? onReturnClick() + : ((datasArr.length === 4 && index !== 1) || datasArr.length < 4) && onClick(item) + }} + > + {item} + + {index < datasArr.length - 1 && + ) + })} +} + + {Object.keys(fullBreadData).length > 0 && ( ++ ) +} +export default NavTree diff --git a/components/select-tree/components/tree/TreeNode.jsx b/components/select-tree/components/tree/TreeNode.jsx new file mode 100644 index 000000000..8611980eb --- /dev/null +++ b/components/select-tree/components/tree/TreeNode.jsx @@ -0,0 +1,105 @@ +import React, { useContext, useRef, useCallback, useState } from 'react' +import Checkbox from '../../../checkbox' +import Icon from '../../../icon' +import Classnames from 'classnames' +import TreeContext from './context' +import IconLoading from './LoadingIcon' +import { getChildrenNodes } from './util' + +const Switcher = ({ expanded, node, onExpandEvent }) => { + const [loading, setLoading] = useState(false) + return loading ? ( ++ )} + {loadingState === 'loading' && } + -
+ {loadingState === 'empty' ? (
+
+ ) : ( + { + !expanded && setLoading(true) + onExpandEvent(node, !expanded, () => setLoading(false)) + }} + /> + ) +} + +const TreeNode = ({ data, flttenData }) => { + // 接受原始拉平数据，用于快速查找子元素 + const { + treeNodeRender, + checkable, + checkedNodes, + selectedItems, + onClick, + selectedId, + onCheckboxChange, + expandIds, + onExpandEvent, + isRemoteLoadData + } = useContext(TreeContext) + const treeNodeRef = useRef(null) + + const renderIndent = useCallback(() => { + return + }, []) + + const renderCheckbox = useCallback( + (node, { checked, semiChecked }) => { + return ( + { + onCheckboxChange(e.target.checked, node, { checked, semiChecked }) + }} + > + + + ) + }, + [checkedNodes] + ) + + const renderTitle = useCallback((node, _selectedId) => { + const { id, title, _title } = node + return ( +s.id === id).length > 0 + })} + onClick={() => { + onClick(node) + }} + dangerouslySetInnerHTML={{ __html: treeNodeRender ? treeNodeRender(_title || title) : _title || title }} + /> + ) + }, []) + return ( +-
+ {data.map((node, index) => {
+ const childrenNodes = getChildrenNodes(node, flttenData)
+ const expand = expandIds.includes(node.id)
+ return (
+
+ + ) + })} ++ + ) +} + +Tree.defaultProps = { + onExpand: () => {}, + loadDataOnExpand: false +} +export default Tree diff --git a/components/select-tree/components/tree/style/index.js b/components/select-tree/components/tree/style/index.js new file mode 100644 index 000000000..63810a681 --- /dev/null +++ b/components/select-tree/components/tree/style/index.js @@ -0,0 +1 @@ +import './index.scss' diff --git a/components/select-tree/components/tree/style/index.scss b/components/select-tree/components/tree/style/index.scss new file mode 100644 index 000000000..5867d61a1 --- /dev/null +++ b/components/select-tree/components/tree/style/index.scss @@ -0,0 +1,144 @@ +@import '../../../../core-css/index.scss'; +$tree: 'hi-select-tree' !default; + +.#{$tree} { + color: use-color('black'); + padding: 12px 12px 0 12px; + box-sizing: border-box; + height: 100%; + overflow: auto; + + &--empty { + margin-left: 50%; + margin-top: 45%; + display: inline-block; + transform: translate(-50%, 0); + } + + &__nodes { + list-style-type: none; + padding: 0; + margin: 0; + } + + &__node { + .hi-btn--loading--icon { + margin-top: -8px; + } + + ul { + padding: 0 16px; + } + + &--self { + display: flex; + align-items: center; + cursor: pointer; + margin-bottom: 12px; + + .hi-checkbox { + white-space: nowrap; + } + + .icon-check { + color: use-color('primary'); + } + } + + .hi-icon { + cursor: pointer; + font-size: 16px; + margin-right: 4px; + } + } + + &__title { + height: 24px; + line-height: 24px; + text-align: left; + white-space: nowrap; + padding: 0 4px; + border-radius: 2px; + + &:hover { + color: #383e47; + background-color: use-color('primary-10'); + } + + &--selected { + color: use-color('primary'); + + &:hover { + color: use-color('primary'); + } + } + } +} + +.hi-breadtree { + &__root { + height: 100%; + width: 100%; + display: flex; + flex-direction: column; + } + + &__list { + margin: 0; + padding: 0 12px; + } + + &__item { + list-style: none; + height: 36px; + display: flex; + align-items: center; + cursor: pointer; + } + + &__text { + flex: 1; + + &--selected { + color: use-color('primary'); + } + } + + &__bread { + display: flex; + flex-wrap: nowrap; + justify-content: flex-start; + height: 36px; + align-items: center; + padding: 0 12px; + background: rgba(247, 247, 247, 1); + font-size: 14px; + flex: none; + } + + &__separator { + margin: 2px 4px 0; + } + + &__bread-content { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + margin: 0 4px; + + &:first-child { + cursor: pointer; + margin-left: 0; + flex: 0 0 auto; + } + + &:hover:not(:last-child) { + color: use-color('primary'); + cursor: pointer; + } + + &--normal { + flex: 0 0 auto; + } + } +} diff --git a/components/select-tree/components/tree/util.js b/components/select-tree/components/tree/util.js new file mode 100644 index 000000000..0ef85bbf1 --- /dev/null +++ b/components/select-tree/components/tree/util.js @@ -0,0 +1,364 @@ +import _ from 'lodash' +// 根据 ID 获取节点 +export const getNode = (id, data) => { + return data.find((n) => n.id === id) +} +// 根据 title 获取节点 +export const getNodeByTitle = (title, data) => { + return data.find((n) => n.title === title) +} +// 根据 id || title 获取节点 +export const getNodeByIdTitle = (val, data) => { + return data.find((n) => n.title === val || n.id === val) +} +// 获取指定节点的兄弟节点 +export const getSibilingsNodes = (node, data) => { + return data.filter((n) => n.pId === node.pId) +} + +// 获取指定节点的父节点 +export const getParentNode = (node, data) => { + return data.find((n) => n.id === node.pId) +} +// 获取指定节点的直接子节点 +export const getChildrenNodes = (node, data) => { + return data.filter((n) => n.pId === node.id) +} +// 获取根节点 +export const getRootNodes = (data) => { + return data.filter((n) => !n.pId) +} +// 获取指定节点的所有后代节点 +export const getDescendantNodes = (node, data, arr = []) => { + const children = getChildrenNodes(node, data) + if (children.length > 0) { + children.forEach((n) => { + arr.push(n) + if (!n.isLeaf) { + getDescendantNodes(n, data, arr) + } + }) + } + return arr +} + +export const hasChildren = (node, data) => { + let bol = false + for (let i = 0; i < data.length; i++) { + if (data[i].pId === node.id) { + bol = true + break + } + } + return bol +} +// 移除指定节点的所有后代节点 +export const removeDescendantNodes = (node, data) => { + const descs = getDescendantNodes(node, data) + descs.map((d) => d.id) + data.filter((n) => descs.forEach()) +} +// 获取指定节点的所有祖先节点 +export const getAncestorsNodes = (node, data, arr = []) => { + const firstParentNode = getParentNode(node, data) + if (firstParentNode) { + arr.push(firstParentNode) + getAncestorsNodes(firstParentNode, data, arr) + } + return arr +} + +/** + * 处理选中数据 + * @param {*} node 当前节点 + * @param {*} data 拉平数据 + * @param {*} checkedIds 选中 IDS + * @param {*} semiCheckedIds 半选 IDS + */ +export const updateCheckData = (node, data, checkedIds, semiCheckedIds) => { + const children = getDescendantNodes(node, data) + const ancestors = node.pId ? getAncestorsNodes(node, data) : [] + children.forEach((child) => { + checkedIds.add(child.id) + semiCheckedIds.delete(child.id) + }) + semiCheckedIds.delete(node.id) + checkedIds.add(node.id) + ancestors.forEach((ancestor) => { + const chi = getChildrenNodes(ancestor, data).map((c) => c.id) + const ins = _.intersection(chi, [...checkedIds]) + if (ins.length === chi.length) { + checkedIds.add(ancestor.id) + semiCheckedIds.delete(ancestor.id) + } else { + semiCheckedIds.add(ancestor.id) + } + }) + return { + checked: [...checkedIds], + semiChecked: [...semiCheckedIds] + } +} + +/** + * 处理取消选中数据 + * @param {*} node 当前节点 + * @param {*} data 拉平数据 + * @param {*} checkedIds 选中 IDS + * @param {*} semiCheckedIds 半选 IDS + */ +export const updateUnCheckData = (node, data, checkedIds, semiCheckedIds) => { + const children = getDescendantNodes(node, data) + const ancestors = node.pId ? getAncestorsNodes(node, data) : [] + checkedIds.delete(node.id) + ancestors.forEach((ancestor) => { + checkedIds.delete(ancestor.id) + semiCheckedIds.add(ancestor.id) + const chi = getChildrenNodes(ancestor, data).map((c) => c.id) + const ins = _.intersection(chi, [...checkedIds, ...semiCheckedIds]) + if (ins.length === 0) { + checkedIds.delete(ancestor.id) + semiCheckedIds.delete(ancestor.id) + } + }) + + children.forEach((child) => { + checkedIds.delete(child.id) + }) + return { + checked: [...checkedIds], + semiChecked: [...semiCheckedIds] + } +} + +/** + * 处理选中的回显数据 + * @param {*} checkedIds 当前所有被选中的节点 ID 集合 + * @param {*} nodeEntries 所有数据的Map 集合 + * @param {*} type 数据回显方式 + */ +export const processSelectedIds = (checkedIds, nodeEntries, type, flattenData) => { + const keySet = new Set(checkedIds) + if (type === 'CHILD') { + return checkedIds.filter((id) => { + const entity = nodeEntries[id] + if (entity) { + let children = [] + if (entity.children && entity.children.length > 0) { + children = entity.children + } else { + // 当异步加载数据后，集合中不存在 children，根据节点取 children + children = getChildrenNodes(entity, flattenData) + } + if (children.length === 0) { + return true + } + if (children.every((node) => keySet.has(node.id))) { + return false + } + } + return true + }) + } + if (type === 'PARENT') { + return checkedIds.filter((id) => { + const entity = nodeEntries[id] + const parent = entity ? entity.parent : null + if (parent && keySet.has(parent.id)) { + return false + } + return true + }) + } + return checkedIds +} + +/** + * 生成展开数据 + * @param {*} expandIds 受控展开节点 IDS + * @param {*} defaultExpandIds 非受控展开节点 IDS + * @param {*} flattenData 拉平数据 + */ +export const parseExpandIds = (expandIds, defaultExpandIds, flattenData) => { + const ids = defaultExpandIds.length > 0 ? defaultExpandIds : expandIds + let arr = [] + ids.forEach((id) => { + const node = getNode(id, flattenData) + if (node) { + arr.push(node.id) + node.ancestors && node.ancestors.length > 0 && (arr = arr.concat(node.ancestors)) + } + }) + return [...new Set(arr)] +} +/** + * 将数据拉平为 pId 类数据 + * @param {*} data 原始数据 + * @param {*} defaultExpandIds 默认展开节点 + * @param {*} defaultExpandAll 是否默认展开全部节点 + * @param {*} isGenEntries 是否生成 map 集合（当多选且数据回显方式不等于 ALL 时） + */ +export const flattenNodesData = (data, isGenEntries = false) => { + const flattenData = [] + const nodeEntries = {} + const fun = (datas, newArr, parent = {}) => { + datas = _.cloneDeep(datas) + datas.forEach((node) => { + const pId = parent.id + node.pId = pId + if (pId) { + const arr = parent.ancestors ? [...parent.ancestors] : [] + arr.unshift(pId) + node.ancestors = arr + } + const _children = node.children + newArr.push(node) + isGenEntries && + (nodeEntries[node.id] = { + ...node, + parent + }) + if (_children) { + fun(_children, newArr, node) + delete node.children + } else { + node.isLeaf = node.hasOwnProperty('isLeaf') ? node.isLeaf : true + } + }) + } + fun(data, flattenData) + return { + flattenData, + nodeEntries + } +} + +export const fillNodeEntries = (parentNode, currentNodeEntries, newData) => { + newData.forEach((nd) => { + nd.parent = parentNode + currentNodeEntries[nd.id] = nd + }) + return currentNodeEntries +} +/** + * 根据 defaultValue 解析默认选中项（自动勾选） + * 2020.06.28 暂停「不含在数据中」的默认值，会引起诸多副作用 + * defaultValue: + * [id, ...] | [title, ...] | [{id: ..}] | [{id: ..., title: ...}] + * 匹配原则： 如果值不符合 {id, title}，会优先从现有数据中匹配 id 或 title，如匹配成功，取 node 做为已选中，如无匹配 则跳过 + * 如同时包含{id, title}，从现有数据中匹配对应数据，如有，取 node 做为已选中，如无匹配，则直接使用该值，与现有数据无关联 + */ +export const parseDefaultSelectedItems = (defaultValue, flattenData) => { + const defaultNodes = [] + if (typeof defaultValue === 'string' || typeof defaultValue === 'number') { + const node = getNodeByIdTitle(defaultValue, flattenData) + node && defaultNodes.push(node) + } else if (defaultValue instanceof Array) { + defaultValue.forEach((val) => { + let node + if (typeof val !== 'object') { + // [0, 'x'] + node = getNodeByIdTitle(val, flattenData) + } else { + // if (val.id && val.title) { + // // [{id: '', title: ''}] + // node = getNode(val.id, flattenData) || val + // } else { + node = getNodeByIdTitle(val.id || val.title, flattenData) + // } + } + node && defaultNodes.push(node) + }) + } + return defaultNodes +} + +/** + * 根据 defaultCheckedIds 解析全选/半选数据 + * @param {*} selectedItems 已选中选项 + */ +export const parseCheckStatusData = (value, checkedNodes, flattenData) => { + value = value.concat(checkedNodes.checked) + const selectedItems = parseDefaultSelectedItems([...new Set(value)], flattenData) + const semiCheckedIds = new Set(checkedNodes.semiChecked) + const checkedIds = new Set(checkedNodes.checked) + semiCheckedIds.clear() + checkedIds.clear() + let isUpdate = false + selectedItems.forEach((node) => { + isUpdate = true + updateCheckData(node, flattenData, checkedIds, semiCheckedIds) + }) + if (isUpdate) { + return { + checked: [...checkedIds], + semiChecked: [...semiCheckedIds] + } + } + return null +} + +/** + * 根据数据回显方式设定显示的数据 + * @param {*} checkIds 当前选中的节点 ID 集合 + */ +export const parseSelectedItems = (checkedNodes, nodeEntries, showCheckedMode, flattenData) => { + const keys = processSelectedIds(checkedNodes.checked, nodeEntries, showCheckedMode, flattenData) + return keys.map((id) => getNode(id, flattenData)) +} + +/** + * 匹配值替换为高亮项 + * @param {*} val 搜索关键字 + * @param {*} text 节点 title + */ +export const matchFilterKey = (val, text = '') => { + const reg = new RegExp(val, 'gi') + const str = `${val}` + if (reg.test(text)) { + text = text.replace(reg, str) + return text + } + return null +} + +/** + * 树节点过滤（根据原始数据） + * @param {*} data 原始数据 + * @param {*} filterVal 过滤值 + */ +export const treeFilterByOriginalData = (data, filterVal) => { + const nodes = _.cloneDeep(data) + if (!(nodes && nodes.length)) { + return + } + const newChildren = [] + for (const node of nodes) { + const matchResult = matchFilterKey(filterVal, node.title) + if (matchResult) { + newChildren.push(node) + } else { + const subs = treeFilterByOriginalData(node.children, filterVal) + if ((subs && subs.length) || matchResult) { + node.children = subs + newChildren.push(node) + } + } + } + return newChildren +} + +export const clearReturnData = (arg) => { + arg = _.cloneDeep(arg) + if (arg instanceof Array) { + arg = arg.map((node) => { + delete node.ancestors + delete node.pId + return node + }) + } else { + delete arg.ancestors + delete arg.pId + } + return arg +} diff --git a/components/select-tree/index.d.ts b/components/select-tree/index.d.ts new file mode 100644 index 000000000..26b3b1aab --- /dev/null +++ b/components/select-tree/index.d.ts @@ -0,0 +1,41 @@ +import { CSSProperties } from "react" + +type DataItem = { + id: string | number + title: string + children?: DataItem[] +} +type DataSource = { + url: string + type?: 'get' | 'post' + data?: object + params?: object + headers?: object + mode?: 'same-origin' | 'cors' | 'no-cors' | 'navigate' + transformResponse?: (response: object) => DataItem[] +} +type FieldNames = { + id?: string + title?: string + disabled?: string + children?: string +} +const DataSourFun: (keyword: string) => DataSource +const FilterOptionFun: (keyword: string, item: DataItem) => boolean +interface Props { + type?: 'single' | 'multiple' + data?: DataItem[] + showCheckedMode?: 'ALL' | 'PARENT' | 'CHILD' + mode?: 'normal' | 'breadcrumb' + defaultExpandAll?: boolean + defaultExpandIds?: string[] | number[] + expandIds?: string[] | number[] + dataSource?: DataSource | DataSourFun + value?: DataItem[] | string[] | number[] + defaultValue?: DataItem[] | string[] | number[] + searchMode?: 'highlight' | 'filter' + onChange?: (selectedIds: string[], changedItem: DataItem) => void + overlayClassName?: string +} +declare const SelectTree: React.ComponentType+ {nodeDataState === 'loading' &&+} + {nodeDataState === 'empty' && empty} + {nodeDataState === 'normal' && } + +export default SelectTree diff --git a/components/select-tree/index.js b/components/select-tree/index.js new file mode 100644 index 000000000..8e5662c6c --- /dev/null +++ b/components/select-tree/index.js @@ -0,0 +1,4 @@ +import SelectTreeHook from './SelectTreeHook' +import './style/index' + +export default SelectTreeHook diff --git a/components/select-tree/style/index.js b/components/select-tree/style/index.js new file mode 100644 index 000000000..63810a681 --- /dev/null +++ b/components/select-tree/style/index.js @@ -0,0 +1 @@ +import './index.scss' diff --git a/components/select-tree/style/index.scss b/components/select-tree/style/index.scss new file mode 100644 index 000000000..323a7aa50 --- /dev/null +++ b/components/select-tree/style/index.scss @@ -0,0 +1,172 @@ +@import '../../core-css/index.scss'; + +.hi-selecttree { + &__input { + width: 320px; + height: 32px; + line-height: 32px; + border: 1px solid use-color('gray-30'); + box-sizing: border-box; + border-radius: 2px; + text-align: left; + padding: 0 0 0 12px; + background-color: use-color('white'); + color: use-color('black'); + display: inline-flex; + justify-content: space-between; + + &:hover { + border: 1px solid use-color('primary'); + + .hi-selecttree__input--expand.clearable { + display: none; + } + + .hi-selecttree__icon-close { + display: block; + } + + .hi-selecttree__icon-close:hover { + color: use-color('black'); + } + } + + &--single { + .hi-selecttree__selecteditem { + background: none; + padding-left: 0; + } + } + + &--placeholder { + color: use-color('gray-50'); + } + + &-icon { + margin: 0 12px; + cursor: pointer; + } + } + + &__selected-wrapper { + flex: 1 0 80%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + display: flex; + align-items: center; + } + + &__icon-close { + color: use-color('gray-50'); + display: none; + } + + &__selected { + &--hidden { + visibility: hidden; + position: absolute; + z-index: -1; + + span { + padding: 0 16px; + } + } + } + + &__selecteditem { + flex: 0 0 auto; + position: relative; + height: 22px; + line-height: 22px; + padding: 0 20px 0 10px; + margin: 0 2px; + overflow: hidden; + vertical-align: middle; + background-color: use-color('gray-10'); + border-radius: 2px; + text-align: left; + box-sizing: border-box; + + &-name { + font-size: 13px; + display: inline-block; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 100%; + } + + &-remove { + cursor: pointer; + display: inline-block; + font-size: 12px; + position: absolute; + top: 0; + right: 4px; + padding: 0 0 0 8px; + } + } + + &__popper { + background: use-color('white'); + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15); + border-radius: 2px; + max-height: 300px; + overflow: auto; + width: 320px; + + &--loading { + height: 300px; + } + } + + &__root { + font-size: 14px; + width: 100%; + height: 100%; + overflow: hidden; + position: relative; + } + + &--hassearch { + padding: 8px 0 0 0; + } + + &__searchbar-wrapper { + background-color: use-color('white'); + width: 100%; + padding: 0 12px; + box-sizing: border-box; + } + + &__searchbar-inner { + height: 36px; + border-bottom: 1px solid use-color('gray-30'); + box-sizing: border-box; + display: flex; + align-items: center; + padding: 0 2px; + + .hi-selecttree_searchbar__icon-close { + color: use-color('gray-50'); + cursor: pointer; + } + + .hi-selecttree_searchbar__icon-close:hover { + color: use-color('black'); + } + } + + &__searchinput { + width: 100%; + height: 100%; + border: none; + outline: none; + padding: 0 10px; + } + + &__panel { + padding: 12px; + } +} diff --git a/components/select/MultipleInput.js b/components/select/MultipleInput.js new file mode 100644 index 000000000..e5ab25af1 --- /dev/null +++ b/components/select/MultipleInput.js @@ -0,0 +1,130 @@ +import React, { useState, useEffect, useRef } from 'react' +import classNames from 'classnames' +import _ from 'lodash' + +import { transKeys } from './utils' + +const MultipleInput = ({ + placeholder, + selectedItems: propsSelectItem, + dropdownShow, + cacheSelectItem, + disabled, + searchable, + clearable, + multipleMode = 'nowrap', + onFocus, + theme, + onBlur, + onClick, + onClickOption, + onClear, + handleKeyDown, + fieldNames, + isFocus +}) => { + const icon = dropdownShow ? 'up' : 'down' + const [showCount, setShowCount] = useState(0) + const tagWrapperRef = useRef('') + const calShowCountFlag = useRef(true) // 在渲染完成进行测试是否展示 +1 + + useEffect(() => { + if (multipleMode === 'nowrap' && calShowCountFlag.current && tagWrapperRef.current) { + // 多选超过一行时以数字显示 + const tagWrapperRect = tagWrapperRef.current.getBoundingClientRect() + let width = 0 + let showCountIndex = 0 // 在第几个开始显示折行 + const tags = tagWrapperRef.current.querySelectorAll('.hi-select__input--item') + tags.forEach((tag, index) => { + const tagRect = tag.getBoundingClientRect() + width += tagRect.width + if (width + 90 > tagWrapperRect.width) { + // 50是留给显示剩余选项的空间 + calShowCountFlag.current = false + showCountIndex = index + } + }) + !calShowCountFlag.current && setShowCount(showCountIndex) + } else { + calShowCountFlag.current = true + } + }) + + const handleClear = (e) => { + e.stopPropagation() + onClear() + } + const selectedItems = _.uniqBy(cacheSelectItem.concat(propsSelectItem), transKeys(fieldNames, 'id')) + const currentCount = showCount === 0 ? selectedItems.length : showCount + return ( + + {selectedItems.length === 0 &&+ ) +} +export default MultipleInput diff --git a/components/select/Select.js b/components/select/Select.js index 0561484af..74e6c1ae1 100644 --- a/components/select/Select.js +++ b/components/select/Select.js @@ -1,664 +1,504 @@ -import React, { Component } from 'react' -import ReactDOM from 'react-dom' +import React, { useState, useEffect, useRef, forwardRef, useCallback } from 'react' import classNames from 'classnames' -import PropTypes from 'prop-types' -import debounce from 'lodash/debounce' -import cloneDeep from 'lodash/cloneDeep' +import _ from 'lodash' + import Popper from '../popper' import SelectInput from './SelectInput' import SelectDropdown from './SelectDropdown' import Provider from '../context' -import fetchJsonp from 'fetch-jsonp' -import qs from 'qs' -import _ from 'lodash' - -class Select extends Component { - autoloadFlag = true // 第一次自动加载数据标识 - - static propTypes = { - type: PropTypes.oneOf(['single', 'multiple']), - multipleWrap: PropTypes.oneOf(['wrap', 'nowrap']), - data: PropTypes.array, - dataSource: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.func - ]), - defaultValue: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array, - PropTypes.bool, - PropTypes.number - ]), - value: PropTypes.oneOfType([ - PropTypes.string, - PropTypes.array, - PropTypes.bool, - PropTypes.number - ]), - showCheckAll: PropTypes.bool, - autoload: PropTypes.bool, - withCredentials: PropTypes.bool, - searchable: PropTypes.bool, - filterOption: PropTypes.func, - clearable: PropTypes.bool, - disabled: PropTypes.bool, - placeholder: PropTypes.string, - emptyContent: PropTypes.string, - optionWidth: PropTypes.number, - style: PropTypes.object, - onChange: PropTypes.func, - render: PropTypes.func, - open: PropTypes.bool - } - - static defaultProps = { - data: [], - type: 'single', - multipleWrap: 'nowrap', - disabled: false, - clearable: true, - defaultValue: '', - autoload: false, - showCheckAll: false, - open: true, - withCredentials: false, - onClick: () => {}, - onBlur: () => {}, - onFocus: () => {} - } - - constructor (props) { - super(props) - - const { data, value, defaultValue } = props - const dropdownItems = cloneDeep(data) - const initialValue = value === undefined ? defaultValue : value - const selectedItems = this.resetSelectedItems( - initialValue, - dropdownItems, - [] +import HiRequest from '../_util/hi-request' +import { resetSelectedItems, transKeys } from './utils' + +const InternalSelect = (props) => { + const { + data, + type, + showCheckAll, + showJustSelected, + className, + disabled, + clearable, + style, + children, + optionWidth, + render, + multipleWrap, + onBlur, + onFocus, + dataSource, + filterOption, + theme, + localeDatas, + preventOverflow, + placement, + onChange: propsonChange, + value, + defaultValue, + autoload, + searchable: propsSearchable, + fieldNames, + overlayClassName, + setOverlayContainer + } = props + const selectInputContainer = useRef() + const [dropdownItems, setDropdownItems] = useState(data) + const [focusedIndex, setFocusedIndex] = useState(0) + const [isFocus, setIsFouces] = useState(false) + // 存储问题 + const [cacheSelectItem, setCacheSelectItem] = useState([]) + + // value 有可能是0的情况 + const [selectedItems, setSelectedItems] = useState( + resetSelectedItems(value === undefined ? defaultValue : value, _.cloneDeep(data), transKeys(fieldNames, 'id')) + ) + + const [dropdownShow, setDropdownShow] = useState(false) + // 搜索关键字 + const [keyword, setKeyword] = useState('') + const [loading, setLoading] = useState(false) + const [searchable, setSearchable] = useState(dataSource ? true : propsSearchable) + useEffect(() => { + // 处理默认值的问题 + const selectedItems = resetSelectedItems( + value === undefined ? defaultValue : value, + _.uniqBy(cacheSelectItem.concat(dropdownItems), transKeys(fieldNames, 'id')), + transKeys(fieldNames, 'id') ) - - const searchable = this.getSearchable() - this.debouncedFilterItems = debounce(this.onFilterItems.bind(this), 300) - this.clickOutsideHandel = this.clickOutside.bind(this) - - this.state = { - searchable, - queryLength: 1, - focusedIndex: 0, - selectedItems, - cacheSelectedItems: selectedItems, - dropdownItems, - dropdownShow: false, - fetching: false, - keyword: '', - filterText: '', - searchInput: { - width: 2 - } - } - } - - getChildContext () { - return { - component: this - } - } - - componentWillMount () { - if (this.isRemote() && this.props.autoload) { - this.remoteSearch() - } - } - - componentDidMount () { - window.addEventListener('click', this.clickOutsideHandel) - this.resetFocusedIndex() - } - - componentWillUnmount () { - window.removeEventListener('click', this.clickOutsideHandel) - } - - clickOutside (e) { - const selectInput = ReactDOM.findDOMNode(this.selectInput) - if ((selectInput && selectInput.contains(e.target)) || (e.target.tagName === 'INPUT' && e.target.className.includes('hi-select__dropdown__searchbar--input'))) { - return - } - this.hideDropdown() - } - - componentWillReceiveProps (nextProps) { - if (!_.isEqual(nextProps.data, this.props.data)) { - const selectedItems = this.resetSelectedItems( - nextProps.value || this.state.selectedItems, - nextProps.data, - [] + // 在异步多选的时候时候才需要进行值的记录 + dataSource && type === 'multiple' && setCacheSelectItem(selectedItems) + }, []) + useEffect(() => { + setSearchable(dataSource ? true : propsSearchable) + }, [propsSearchable]) + + useEffect(() => { + setIsFouces(dropdownShow) + }, [dropdownShow]) + + useEffect(() => { + if (value !== undefined) { + // 处理默认值的问题 + const selectedItems = resetSelectedItems( + value, + _.uniqBy(cacheSelectItem.concat(dropdownItems), transKeys(fieldNames, 'id')), + transKeys(fieldNames, 'id') ) - this.setState({ - selectedItems, - cacheSelectedItems: selectedItems, - dropdownItems: cloneDeep(nextProps.data) - }) - } else { - if (!_.isEqual(nextProps.value, this.props.value)) { - const selectedItems = this.resetSelectedItems( - nextProps.value, - this.state.dropdownItems, - [] - ) // 异步获取时会从内部改变dropdownItems，所以不能从list取 - this.setState({ - selectedItems, - cacheSelectedItems: selectedItems - }) - } + setSelectedItems(selectedItems) } - } - - getSearchable () { - const { searchable } = this.props - - if (this.isRemote()) { - return true - } - return searchable - } - - parseValue (value = this.props.value) { - if (Array.isArray(value)) { - return value.map(v => { - if (typeof v === 'object') { - return v.id - } else { - return v - } - }) - } else { - return [value] - } - } - - isRemote () { - const { dataSource, onSearch } = this.props - return onSearch || dataSource - } - - resetSelectedItems (value, dropdownItems = [], reviceSelectedItems = []) { - const values = this.parseValue(value) - let selectedItems = [] - dropdownItems.forEach(item => { - if (values.includes(item.id)) { - selectedItems.push(item) + }, [value]) + + useEffect(() => { + const _data = _.cloneDeep(data) + const selectedItems = resetSelectedItems( + value === undefined ? defaultValue : value, + _data, + transKeys(fieldNames, 'id') + ) + setSelectedItems(selectedItems) + setDropdownItems(_data) + dataSource && type === 'multiple' && setCacheSelectItem(selectedItems) + }, [data]) + + const localeDatasProps = useCallback( + (key) => { + if (props[key]) { + return props[key] + } else { + return localeDatas.select[key] } - }) - return _.uniqBy(reviceSelectedItems.concat(selectedItems), 'id') - } - - onEnterSelect () { - const { dropdownItems, focusedIndex } = this.state - const item = dropdownItems[focusedIndex] - this.onClickOption(item, focusedIndex) - } - - onChange (selectedItems, changedItems, callback, cacheSelectedItems) { - const { onChange, value } = this.props - value === undefined && - this.setState( - { - selectedItems - }, - callback - ) - const selectedIds = selectedItems.map(({ id }) => id) - onChange && onChange(selectedIds, changedItems) - } - - checkAll (filterItems, e) { - // 全选 - e && e.stopPropagation() - - const { selectedItems } = this.state - let _selectedItems = [...selectedItems] - let changedItems = [] - filterItems.forEach(item => { - if (!item.disabled && this.matchFilter(item)) { - if ( - !_selectedItems.map(selectItem => selectItem.id).includes(item.id) - ) { + }, + [props] + ) + // 改变的回调 + const onChange = useCallback( + (selectedItems, changedItems, callback) => { + if (value === undefined) { + setSelectedItems(selectedItems) + callback() + } + // 调用用户的select + const selectedIds = selectedItems.map((item) => item[transKeys(fieldNames, 'id')]) + propsonChange && propsonChange(selectedIds, changedItems) + }, + [propsonChange] + ) + // 选中某一项 + const onClickOption = useCallback( + (item, index) => { + if (!item || item[transKeys(fieldNames, 'disabled')]) return + + let _selectedItems = _.cloneDeep(selectedItems) + if (type === 'multiple') { + // 获取元素索引 + const itemIndex = _selectedItems.findIndex((sItem) => { + return sItem[transKeys(fieldNames, 'id')] === item[transKeys(fieldNames, 'id')] + }) + if (itemIndex === -1) { _selectedItems.push(item) - changedItems.push(item) + } else { + _selectedItems.splice(itemIndex, 1) } - } - }) - this.onChange(_selectedItems, changedItems, () => {}, _selectedItems) - } - - onClickOption (item, index) { - if (!item || item.disabled) return - - let selectedItems = this.state.selectedItems.concat() - let cacheSelectedItems = this.state.selectedItems.concat() - let focusedIndex = index - - if (this.props.type === 'multiple') { - let itemIndex = this.state.selectedItems.findIndex(sItem => { - return sItem.id === item.id - }) - if (itemIndex === -1) { - selectedItems.push(item) - if (!cacheSelectedItems.map(cacheItem => cacheItem.id).includes(item.id)) { - cacheSelectedItems.push(item) + // 在受控情况下 + if (_.isEqual(cacheSelectItem, selectedItems) && dataSource) { + setCacheSelectItem(_selectedItems) } } else { - selectedItems.splice(itemIndex, 1) + _selectedItems = [item] } - } else { - selectedItems = [item] - this.setState({ - cacheSelectedItems: [item] - }) - } - - this.onChange(selectedItems, item, () => { - this.setState({ - focusedIndex, - cacheSelectedItems: this.props.type === 'multiple' ? cacheSelectedItems : [item] + onChange(_selectedItems, item, () => { + setFocusedIndex(index) }) - }, this.props.type === 'multiple' ? cacheSelectedItems : [item]) - if (this.props.type !== 'multiple') { - this.hideDropdown() - } - } + type !== 'multiple' && hideDropdown() + }, + [type, selectedItems, onChange, dropdownShow, cacheSelectItem] + ) - clearKeyword () { - this.setState( - { - keyword: '' - }, - () => { - this.selectInput.clearInput() - } - ) - } - - handleInputClick = e => { - let { dropdownShow } = this.state + // 收起下拉框 + const hideDropdown = useCallback(() => { if (dropdownShow) { - this.hideDropdown() - return + setKeyword('') + setDropdownShow(false) } - - !this.getSearchable() && this.selectInput.focus() - if (this.props.disabled) { - return + // 多选具有默认值的话打开的话应该显示选中的值 + if (dataSource && type === 'multiple') { + setCacheSelectItem(selectedItems) + setDropdownItems(selectedItems) } - - if (dropdownShow === false) { - this.showDropdown() - } - } - - hideDropdown () { - this.state.dropdownShow === true && - this.setState({ dropdownShow: false, cacheSelectedItems: this.state.selectedItems }, () => { - this.clearKeyword() - }) - } - - showDropdown () { - this.state.dropdownShow === false && this.setState({ dropdownShow: true }) - } - - deleteItem (item) { - if (item.disabled) return - let selectedItems = this.state.selectedItems.concat() - const sIndex = selectedItems.findIndex((obj, index, arr) => { - return obj.id === item.id - }) - - selectedItems.splice(sIndex, 1) - this.onChange(selectedItems, item, () => { - !this.getSearchable() && this.selectInput.focus() - }, selectedItems) - } - // 全部删除 - deleteAllItems () { - const { type } = this.props - const focusedIndex = this.resetFocusedIndex() - const changedItems = [...this.state.selectedItems] - this.onChange( - [], - type === 'multiple' ? changedItems : changedItems[0], - () => { - this.setState({ focusedIndex }) - this.onFilterItems('') - }, - [] - ) - } - - remoteSearch (keyword) { - const { onSearch, dataSource, autoload, withCredentials: propsWithCredentials } = this.props - if (onSearch && typeof onSearch === 'function') { - this.setState({ - fetching: true - }) - onSearch(keyword).finally(() => { - this.setState({ fetching: false }) - }) - } else { - const _dataSource = typeof dataSource === 'function' ? dataSource(keyword) : dataSource - let { - url, - transformResponse, - error, - params, - headers, - mode, - data = {}, - type = 'GET', - key, - withCredentials = propsWithCredentials, - jsonpCallback = 'callback', - ...options - } = _dataSource - - keyword = - !keyword && this.autoloadFlag && autoload - ? _dataSource.keyword - : keyword - this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 - Object.assign(options, {mode}, {headers}) - - const queryParams = qs.stringify( - Object.assign({}, params, key && { [key]: keyword }) - ) - if (!_.isEmpty(queryParams)) { - url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}` - } - if (type.toUpperCase() === 'POST') { - options.body = JSON.stringify(data) - } - - this.setState({ - fetching: true - }) - - if (type.toUpperCase() === 'JSONP') { - const _o = { - jsonpCallback: jsonpCallback, - jsonpCallbackFunction: jsonpCallback - } - fetchJsonp(url, _o) - .then(res => res.json()) - .then(json => { - this._setDropdownItems(json, transformResponse) + }, [dropdownShow, selectedItems, dataSource, type]) + // 方向键的回调 + const moveFocusedIndex = useCallback( + (direction) => { + let _focusedIndex = focusedIndex + if (direction === 'up') { + dropdownItems + .slice(0, _focusedIndex) + .reverse() + .every((item) => { + _focusedIndex-- + if (!item[transKeys(fieldNames, 'disabled')] && matchFilter(item)) { + return false + } + return true }) } else { - /* eslint-disable */ - fetch(url, { - method: type, - credentials: withCredentials ? 'include' : 'same-origin', - ...options + dropdownItems.slice(_focusedIndex + 1).every((item) => { + _focusedIndex++ + if (!item[transKeys(fieldNames, 'disabled')] && matchFilter(item)) { + return false + } + return true }) - .then(response => response.json()) - .then( - res => { - this._setDropdownItems(res, transformResponse) - }, - err => { - error && error(err) - this.setState({ - fetching: false - }) - } - ) } - } - } - _setDropdownItems(res, func) { - let dropdownItems = [] - if (func) { - dropdownItems = func(res) - } else { - dropdownItems = res.data - } - if (Array.isArray(dropdownItems)) { - const reviceSelectedItems = this.props.type === 'multiple' ? this.props.dataSource && this.state.selectedItems || [] : this.state.cacheSelectedItems - const selectedItems = this.resetSelectedItems( - this.props.value, - dropdownItems, - reviceSelectedItems - ) - this.setState({ - dropdownItems, - selectedItems - }) - } - this.setState({ - fetching: false - }) - } - onFilterItems(keyword) { - const { onSearch, dataSource, autoload } = this.props - this.setState( - { - keyword: keyword - }, - () => this.resetFocusedIndex() - ) - if (dataSource) { - if (autoload ||(keyword && keyword.length >= this.state.queryLength)) { - this.remoteSearch(keyword) + setFocusedIndex(_focusedIndex) + }, + [focusedIndex, dropdownItems, fieldNames] + ) + // 点击回车选中 + const onEnterSelect = useCallback(() => { + const item = dropdownItems[focusedIndex] + onClickOption(item, focusedIndex) + }, [dropdownItems, focusedIndex, onClickOption]) + // 按键操作 + const handleKeyDown = useCallback( + (evt) => { + if (evt.keyCode === 13) { + onEnterSelect() } - } else if(onSearch) { - this.remoteSearch(keyword) - } - } - matchFilter(item) { - const { filterOption } = this.props - const { searchable, keyword } = this.state + if (evt.keyCode === 38) { + evt.preventDefault() + moveFocusedIndex('up') + } + if (evt.keyCode === 40) { + evt.preventDefault() + moveFocusedIndex('down') + } + }, + [onEnterSelect, moveFocusedIndex, moveFocusedIndex] + ) + // 对关键字的校验 对数据的过滤 + const matchFilter = useCallback( + (item) => { + const shouldMatch = dataSource || !searchable || !keyword + + if (typeof filterOption === 'function') { + return shouldMatch || filterOption(keyword, item) + } - const shouldMatch = this.isRemote() || !searchable || !keyword + return ( + shouldMatch || + String(item[transKeys(fieldNames, 'id')] || '').includes(keyword) || + String(item[transKeys(fieldNames, 'title')] || '').includes(keyword) + ) + }, + [dataSource, searchable, keyword, filterOption] + ) - if (typeof filterOption === "function") { - return shouldMatch || filterOption(keyword, item) + useEffect(() => { + if (dataSource && autoload) { + remoteSearch() } + }) - return ( - shouldMatch || - String(item.id).includes(keyword) || String(item.title).includes(keyword) + const remoteSearch = useCallback( + (keyword) => { + const _dataSource = typeof dataSource === 'function' ? dataSource(keyword) : dataSource + if (Array.isArray(_dataSource)) { + setDropdownItems(_dataSource) + return + } + // 处理promise函数 + if (_dataSource.toString() === '[object Promise]') { + setLoading(true) + _dataSource.then( + (res) => { + setLoading(false) + setDropdownItems(Array.isArray(res) ? res : []) + }, + () => { + setLoading(false) + setDropdownItems([]) + } + ) + return + } + // 调用接口 + HiRequestSearch(_dataSource, keyword) + }, + [dataSource, keyword] + ) + const HiRequestSearch = useCallback((_dataSource, keyword) => { + const { + url, + method = 'GET', + transformResponse, + headers, + data = {}, + params = {}, + key, + error, + credentials, + withCredentials = false, + ...options + } = _dataSource + // 处理Key + + options.params = key ? { [key]: keyword, ...params } : params + + const _withCredentials = withCredentials || credentials === 'include' + + HiRequest({ + url, + method, + data: data, + withCredentials: _withCredentials, + error, + beforeRequest: (config) => { + setLoading(true) + return config + }, + errorCallback: (err) => { + setLoading(false) + error && error(err) + }, + ...options + }).then( + (response) => { + setLoading(false) + const dataItems = transformResponse && transformResponse(response.data, response) + if (Array.isArray(dataItems)) { + setDropdownItems(dataItems) + } else { + console.error('transformResponse return data is not array') + } + }, + (error) => { + throw error + } ) + }, []) + useEffect(() => { + resetFocusedIndex() + }, [keyword]) + // 过滤筛选项 + const onFilterItems = (keyword) => { + setKeyword(keyword) + + if (dataSource && (autoload || keyword)) { + remoteSearch(keyword) + } } - - resetFocusedIndex(setState = true) { - let focusedIndex = -1 - - this.state.dropdownItems.every(item => { - focusedIndex++ - if (!item.disabled && this.matchFilter(item)) { + // 重置下标 + const resetFocusedIndex = () => { + let _focusedIndex = -1 + dropdownItems.every((item) => { + _focusedIndex++ + if (!item[transKeys(fieldNames, 'disabled')] && matchFilter(item)) { return false } return true }) - setState && - this.setState({ - focusedIndex - }) - return focusedIndex + setFocusedIndex(_focusedIndex) + return _focusedIndex } - setFocusedIndex(focusedIndex) { - this.setState({ focusedIndex }) + // 全部删除 + const deleteAllItems = () => { + onChange([], type === 'multiple' ? selectedItems : selectedItems[0], () => { + onFilterItems('') + resetFocusedIndex() + }) + setCacheSelectItem([]) } - - moveFocusedIndex(direction) { - let { focusedIndex } = this.state - const { dropdownItems } = this.state - - if (direction === "up") { - dropdownItems - .slice(0, focusedIndex) - .reverse() - .every(item => { - focusedIndex-- - if (!item.disabled && this.matchFilter(item)) { - return false - } - return true - }) - } else { - dropdownItems.slice(focusedIndex + 1).every(item => { - focusedIndex++ - if (!item.disabled && this.matchFilter(item)) { - return false - } - return true - }) + // 防抖 + const debouncedFilterItems = _.debounce(onFilterItems, 300) + // 全选 + const checkAll = (e, filterItems, isCheck) => { + // 全选 + e && e.stopPropagation() + if (!isCheck) { + onChange([], [], () => {}) + return } - this.setState({ - focusedIndex + const _selectedItems = [...selectedItems] + const changedItems = [] + filterItems.forEach((item) => { + if (!item[transKeys(fieldNames, 'disabled')] && matchFilter(item)) { + if ( + !_selectedItems + .map((selectItem) => selectItem[transKeys(fieldNames, 'id')]) + .includes(item[transKeys(fieldNames, 'id')]) + ) { + _selectedItems.push(item) + changedItems.push(item) + } + } }) + onChange(_selectedItems, changedItems, () => {}) } - - localeDatasProps(key) { - const { localeDatas } = this.props - if (this.props[key]) { - return this.props[key] - } else { - return localeDatas.select[key] + // input点击事件 + const handleInputClick = () => { + if (dropdownShow) { + hideDropdown() + return } - } - - render() { - const { - type, - showCheckAll, - className, - disabled, - clearable, - style, - children, - optionWidth, - render, - multipleWrap, - onClick, - onBlur, - onFocus, - dataSource, - filterOption, - onSearch, - theme, - localeDatas - } = this.props - const placeholder = this.localeDatasProps('placeholder') - const emptyContent = this.localeDatasProps('emptyContent') - const searchPlaceholder = this.localeDatasProps('searchPlaceholder') - const { - selectedItems, - cacheSelectedItems, - dropdownItems, - searchable, - dropdownShow, - focusedIndex, - fetching, - } = this.state - const extraClass = { - "is-multiple": type === "multiple", - "is-single": type === "single" + if (disabled) { + return } - const selectInputWidth = this.selectInputContainer ? this.selectInputContainer.getBoundingClientRect().width : null - return ( -{placeholder}} ++ {selectedItems.slice(0, currentCount).map((item, index) => { + const _item = ( ++ + 0 + })} + /> + {clearable && selectedItems.length > 0 && ( + + )} + +++ ) + return _item + })} + {currentCount < selectedItems.length && ( +{item[transKeys(fieldNames, 'title')]}+ { + e.stopPropagation() + onClickOption(item, 0) + }} + > + + ++ +{selectedItems.length - currentCount} ++ )} + {searchable && !disabled && ( ++ ++ )} +-{ - this.selectInputContainer = node + !dropdownShow && setDropdownShow(true) + } + const placeholder = localeDatasProps('placeholder') + const emptyContent = localeDatasProps('emptyContent') + const searchPlaceholder = localeDatasProps('searchPlaceholder') + const extraClass = { + 'is-multiple': type === 'multiple', + 'is-single': type === 'single' + } + const selectInputWidth = selectInputContainer.current + ? selectInputContainer.current.getBoundingClientRect().width + : null + return ( ++ ) } +InternalSelect.defaultProps = { + data: [], + type: 'single', + fieldNames: { + title: 'title', + id: 'id', + disabled: 'disabled', + children: 'children' + }, + multipleWrap: 'nowrap', + disabled: false, + clearable: true, + defaultValue: '', + autoload: false, + showCheckAll: false, + showJustSelected: false, + open: true, + onClick: () => {}, + onBlur: () => {}, + onFocus: () => {} +} +const Select = forwardRef((props, ref) => { + return+- ) - } -} -Select.childContextTypes = { - component: PropTypes.any + {children} ++- {children} -{ + handleInputClick() }} - > - { - this.selectInput = node - }} - theme={theme} - mode={type} - disabled={disabled} - searchable={searchable} - clearable={clearable} - show={dropdownShow && this.props.open} - dropdownShow={dropdownShow} - placeholder={placeholder} - selectedItems={selectedItems} - dropdownItems={dropdownItems} - multipleMode={multipleWrap} - container={this.selectInputContainer} - moveFocusedIndex={this.moveFocusedIndex.bind(this)} - onClick={() => { - if (this.props.open) { - this.handleInputClick() - } - onClick() - }} - onBlur={onBlur} - onFocus={onFocus} - onDelete={this.deleteItem.bind(this)} - onClear={this.deleteAllItems.bind(this)} - onSearch={this.debouncedFilterItems.bind(this)} - onEnterSelect={this.onEnterSelect.bind(this)} - /> - - { dropdownShow && this.props.open && + />- } - { + hideDropdown() + }} + > + ++ +}) export default Provider(Select) diff --git a/components/select/SelectDropdown.js b/components/select/SelectDropdown.js index 764909091..10d205c18 100644 --- a/components/select/SelectDropdown.js +++ b/components/select/SelectDropdown.js @@ -1,261 +1,312 @@ -import React, { Component } from 'react' +import React, { useState, useEffect, useRef, useCallback } from 'react' import classNames from 'classnames' import Checkbox from '../checkbox' import Loading from '../loading' import Icon from '../icon' +import { transKeys } from './utils' -class SelectDropdown extends Component { - constructor (props) { - super(props) - this.state = { - filterItems: this.props.dropdownItems, - searchbarValue: '', - cachedropdownItems: this.props.dropdownItems - } - } - static getDerivedStateFromProps (nextProps, prevState) { - const {selectedItems, mode, isOnSearch, dropdownItems, show} = nextProps - const {searchbarValue, cachedropdownItems} = prevState - const _filterItems = selectedItems.length > 0 && searchbarValue.length === 0 && mode === 'single' && isOnSearch ? cachedropdownItems : dropdownItems - const _searchbarValue = show ? searchbarValue : '' - return {filterItems: _filterItems, searchbarValue: _searchbarValue} - } - componentDidMount () { - this.focus() - } - focus = () => { - this.props.searchable && setTimeout(() => this.searchbar && this.searchbar.focus(), 0) - } - onClickOption (e, item, index) { - e.stopPropagation() - e.preventDefault() - if (item.disabled) { - return - } - this.props.mode === 'single' && this.props.isOnSearch && this.setState({ - cachedropdownItems: this.props.dropdownItems - }) - this.props.onClickOption(item, index) - } - filterOptions = (keyword) => { - const { dropdownItems, filterOption } = this.props - let filterItems = [] - if (typeof filterOption === 'function' || keyword === '') { - filterItems = dropdownItems - } else { - dropdownItems.map((item) => { - String(item.title).includes(keyword) && filterItems.push(item) - }) - } - this.setState({ - filterItems: filterItems, - searchbarValue: keyword - }) - } - searchEvent (e) { - const filterText = e.target.value - this.filterOptions(filterText) - this.props.onSearch(filterText) - - this.setState({ - searchbarValue: filterText - }) - } - hightlightKeyword (text, uniqueKey) { - const { searchbarValue } = this.state - let _keyword = this.state.searchbarValue - _keyword = searchbarValue.includes('[') ? _keyword.replace(/\[/gi, '\\[') : _keyword - _keyword = searchbarValue.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword - _keyword = searchbarValue.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword +const SelectDropdown = ({ + mode, + matchFilter, + emptyContent, + loading, + optionWidth, + showCheckAll, + showJustSelected, + dropdownRender, + theme, + searchable, + onFocus, + onBlur, + searchPlaceholder, + dropdownItems, + localeMap, + handleKeyDown, + onSearch, + isOnSearch, + onClickOption, + checkAll, + selectInputWidth, + selectedItems, + show, + fieldNames +}) => { + const [filterItems, setFilterItems] = useState(dropdownItems) + const [searchbarValue, setSearchbarValue] = useState('') + const [ischeckAll, setIscheckAll] = useState(false) + const searchbar = useRef('') + useEffect(() => { + setFilterItems(dropdownItems) + }, [dropdownItems]) - let parts = text.toString().split(new RegExp(`(${_keyword})`, 'gi')) - return ( - this.state.searchbarValue.length > 0 ? - { parts.map((part, i) => - part === searchbarValue - ? - { part } - - : part + // 监控全选功能 + useEffect(() => { + setIscheckAll(selectedItems.length > 0 && selectedItems.length === filterItems.length) + }, [selectedItems, filterItems]) + // 让搜索框获取焦点 + useEffect(() => { + searchable && setTimeout(() => searchbar.current && searchbar.current.focus(), 0) + }, []) + // 仅看已选 + const showSelected = useCallback( + (check) => { + if (check) { + const values = selectedItems.map((item) => { + return item[transKeys(fieldNames, 'id')] + }) + setFilterItems( + dropdownItems.filter((item) => { + return values.includes(item[transKeys(fieldNames, 'id')]) + }) ) - } -
- : text - ) - } - onMouseEnter (item, index) { - !item.disabled && this.props.setFocusedIndex(index) - } - - itemSelected (item) { - const selectedItems = this.props.selectedItems + } else { + setFilterItems(dropdownItems) + } + }, + [selectedItems, fieldNames, dropdownItems] + ) + useEffect(() => { + const _filterItems = dropdownItems + setFilterItems(_filterItems) + }, [mode, isOnSearch, dropdownItems, show]) - return selectedItems.map((item) => item.id).indexOf(item.id) > -1 + let matched = 0 + const style = optionWidth && { + width: optionWidth } - cleanSearchbarValue (e) { - e.stopPropagation() - const filterText = '' - this.filterOptions(filterText) - this.props.onSearch(filterText) - this.setState({ - searchbarValue: filterText - }) - } - handleKeyDown (evt) { - if (evt.keyCode === 13) { - this.props.onEnterSelect() - } + const filterOptions = useCallback( + (keyword) => { + setFilterItems(dropdownItems) + setSearchbarValue(keyword) + }, + [dropdownItems] + ) + const searchEvent = useCallback( + (e) => { + const filterText = e.target.value + filterOptions(filterText) + onSearch(filterText) + }, + [onSearch] + ) - if (evt.keyCode === 38) { - evt.preventDefault() - this.props.moveFocusedIndex('up') - } - if (evt.keyCode === 40) { - evt.preventDefault() - this.props.moveFocusedIndex('down') - } - } - renderOption (mode, isSelected, item) { - if (item.children) { - return item.children - } - if (this.props.dropdownRender) { - return this.props.dropdownRender(item, isSelected) + const cleanSearchbarValue = useCallback( + (e) => { + e.stopPropagation() + const filterText = '' + filterOptions(filterText) + onSearch(filterText) + }, + [onSearch] + ) + // 是否被选中 + const itemSelected = useCallback( + (item) => { + return ( + selectedItems.map((item) => item[transKeys(fieldNames, 'id')]).indexOf(item[transKeys(fieldNames, 'id')]) > -1 + ) + }, + [selectedItems, fieldNames] + ) + // 点击某个选项时 + const onClickOptionIntal = useCallback( + (e, item, index) => { + e.stopPropagation() + e.preventDefault() + if (item[transKeys(fieldNames, 'disabled')]) { + return + } + onClickOption(item, index) + }, + [onClickOption, fieldNames] + ) + // 高亮关键字 + const hightlightKeyword = useCallback( + (text = '', uniqueKey) => { + let _keyword = searchbarValue + _keyword = searchbarValue.includes('[') ? _keyword.replace(/\[/gi, '\\[') : _keyword + _keyword = searchbarValue.includes('(') ? _keyword.replace(/\(/gi, '\\(') : _keyword + _keyword = searchbarValue.includes(')') ? _keyword.replace(/\)/gi, '\\)') : _keyword + + const parts = text.split(new RegExp(`(${_keyword})`, 'gi')) + return searchbarValue.length > 0 ? ( ++ {parts.map((part, i) => + part === searchbarValue ? ( + + {part} + + ) : ( + part + ) + )} +
+ ) : ( + text + ) + }, + [searchbarValue] + ) + // 渲染单个选项 + const renderOption = (isSelected, item) => { + if (dropdownRender) { + return dropdownRender(item, isSelected) } const paddingNum = mode === 'multiple' ? 48 : 24 + // 提高可读性 + let width = selectInputWidth ? selectInputWidth - paddingNum : null + if (optionWidth) { + width = optionWidth - paddingNum + } const style = { - width: this.props.optionWidth ? this.props.optionWidth - paddingNum : this.props.selectInputWidth ? this.props.selectInputWidth - paddingNum : null + width } return ({mode === 'multiple' && ( - )} {mode === 'single' && ( -{ - this.props.isOnSearch ? item.title : this.hightlightKeyword(item.title, item.id) - }++ {isOnSearch + ? item[transKeys(fieldNames, 'title')] + : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])} +{ - this.props.isOnSearch ? item.title : this.hightlightKeyword(item.title, item.id) - }- )} - {mode === 'single' && isSelected && ( -- ++ {isOnSearch + ? item[transKeys(fieldNames, 'title')] + : hightlightKeyword(item[transKeys(fieldNames, 'title')], item[transKeys(fieldNames, 'id')])})} ) } - - render () { - const { - mode, - focusedIndex, - matchFilter, - noFoundTip, - loading, - optionWidth, - showCheckAll, - dropdownRender, - theme, - searchable, - onFocus, - onBlur, - searchPlaceholder, - localeMap - } = this.props - const { filterItems, searchbarValue } = this.state - let matched = 0 - const style = optionWidth && { - width: optionWidth - } - + const groupItem = (filterGroupItem, filterItemsIndex) => { + const renderGroup = [] + const label = ( +onClickOptionIntal(e, item, filterItemsIndex)} + key={item[transKeys(fieldNames, 'id')]} + index={filterItemsIndex} > - {searchable && ---+ ) } export default SelectDropdown diff --git a/components/select/SelectInput.js b/components/select/SelectInput.js index 1b53acae3..9b0bf2f0e 100644 --- a/components/select/SelectInput.js +++ b/components/select/SelectInput.js @@ -1,293 +1,17 @@ -import React, { Component } from 'react' -import classNames from 'classnames' -import { getTextWidth } from './common.js' - -class SelectInput extends Component { - constructor (props) { - super(props) - - this.state = { - showCount: 0, - value: '', - inputStyle: { - width: 2 - }, - cacheselectedItems: [] - } - this.wrapperRect = this.itemsRef && this.itemsRef.getBoundingClientRect() - } - - calShowCountFlag = true - componentDidMount() { - this.wrapperRect = this.itemsRef && this.itemsRef.getBoundingClientRect() - } - componentDidUpdate () { - if ( - this.props.multipleMode === 'nowrap' && - this.calShowCountFlag && - this.itemsRef - ) { - // 多选超过一行时以数字显示 - const itemsRect = this.wrapperRect - let width = 0 - let showCount = 0 - const items = this.itemsRef.querySelectorAll('.hi-select__input--item') - - for (const item of items) { - const itemRect = item.getBoundingClientRect() - width += itemRect.width - if ( - width + 50 < itemsRect.width || - (width > itemsRect.width && - width + 50 <= itemsRect.width && - showCount + 1 === items.length) - ) { - // 50是留给显示剩余选项的空间 - ++showCount - } else { - break - } - } - this.setState({ showCount }) - this.calShowCountFlag = false - } else { - this.calShowCountFlag = true - } - } - - static getDerivedStateFromProps (nextProps, nextState) { - return nextProps.dropdownShow - ? { cacheselectedItems: nextProps.selectedItems.length > 0 ? nextProps.selectedItems : nextState.cacheselectedItems } : { cacheselectedItems: nextProps.selectedItems } - } - focus () { - this.wrapperRect = this.itemsRef && this.itemsRef.getBoundingClientRect() - setTimeout(() => this.searchInput && this.searchInput.focus(), 0) - } - - handleKeywordChange (evt) { - var val = evt.target.value - this.setState({ - value: val, - inputStyle: { - width: getTextWidth(val) - } - }) - this.props.onSearch(evt.target.value) - } - - clearInput () { - this.searchInput && (this.searchInput.value = '') - this.setState({ - value: '' - }) - } - - handleKeyDown (evt) { - if (evt.keyCode === 13) { - this.props.onEnterSelect() - } - - if (evt.keyCode === 38) { - evt.preventDefault() - this.props.moveFocusedIndex('up') - } - if (evt.keyCode === 40) { - evt.preventDefault() - this.props.moveFocusedIndex('down') - } - } - - handleClear () { - this.setState({ - cacheselectedItems: [] - }) - this.props.onClear() - this.clearInput() - } - - renderMultiple () { - let { - placeholder, - selectedItems, - dropdownShow, - disabled, - searchable, - clearable, - multipleMode, - onFocus, - theme, - onBlur - } = this.props - let icon = dropdownShow ? 'up' : 'down' - let { showCount, value, inputStyle } = this.state - showCount = - showCount === 0 || this.calShowCountFlag - ? selectedItems.length - : showCount - - if (!selectedItems.length) { - inputStyle = { width: '100%' } - } - return ( -+ {renderOption(isSelected, item, filterItemsIndex)} + + ) + } + const renderItems = () => { + return ( + -
+ {filterItems &&
+ filterItems.map((item, filterItemsIndex) => {
+ if (matchFilter(item)) {
+ return item[transKeys(fieldNames, 'children')]
+ ? groupItem(item, filterItemsIndex)
+ : normalItem(item, filterItemsIndex)
+ }
+ })}
+ {matched === 0 && (
+
+ {searchable && ( ++ )} + {loading && ( ++} - {loading && ( -+ +-+ { - this.searchbar = input - }} + clearable="true" + ref={searchbar} value={searchbarValue} - onFocus={onFocus.bind(this)} - onBlur={onBlur.bind(this)} - clearabletrigger='always' - onKeyDown={this.handleKeyDown.bind(this)} - onInput={this.searchEvent.bind(this)} - onChange={this.searchEvent.bind(this)} + onFocus={onFocus} + onBlur={onBlur} + clearabletrigger="always" + onKeyDown={handleKeyDown} + onChange={searchEvent} /> - {searchbarValue.length > 0 ? : null} - -- )} - {!loading && ( -+ {searchbarValue.length > 0 ? ( + + + + ) : null} -
+
++ )} - { - filterItems.map((item, index) => { - if (matchFilter(item)) { - matched++ - const isSelected = this.itemSelected(item) - const isDisabled = item.disabled - return ( -+ - {selectedItems.length === 0 && !value && ( -- ) - } - - renderSingle () { - let { - placeholder, - selectedItems, - dropdownShow, - disabled, - clearable, - onFocus, - theme, - onBlur - } = this.props - - selectedItems = selectedItems.length > 0 ? selectedItems : this.state.cacheselectedItems - placeholder = - selectedItems.length > 0 ? selectedItems[0].title : placeholder - let icon = dropdownShow ? 'up' : 'down' - return ( -{placeholder}- )} -{ - this.itemsRef = node - }} - > - {selectedItems.slice(0, showCount).map((item, index) => { - const _item = ( -- - 0 } - )} - /> - {clearable && selectedItems.length > 0 && ( - - )} - --- ) - return _item - })} - {showCount < selectedItems.length && ( -{item.title}- { - e.stopPropagation() - !disabled && this.props.onDelete(item) - }} - > - - -- + - - {selectedItems.length - showCount} - -- )} - {searchable && !disabled && ( -- { - this.searchInput = input - }} - onChange={this.handleKeywordChange.bind(this)} - onKeyDown={this.handleKeyDown.bind(this)} - onFocus={onFocus.bind(this)} - onBlur={onBlur.bind(this)} - readOnly - /> -- )} -{ - this.itemsRef = node - }} - > -- ) - } - - render () { - let { mode } = this.props - - if (mode === 'multiple') { - return this.renderMultiple() - } else { - return this.renderSingle() - } - } +import React, { forwardRef } from 'react' +import SingleInput from './SingleInput' +import MultipleInput from './MultipleInput' + +const InternalSelectInput = (props) => { + const { mode, handleKeyDown } = props + + return mode === 'multiple' ? ( +0) - })} - style={{width: this.wrapperRect && this.wrapperRect.width-46}} - > -- {(dropdownShow || selectedItems.length === 0) && ( -- {selectedItems[0] && selectedItems[0].title} --0})} style={{width:this.wrapperRect && this.wrapperRect.width-46}}> - { - this.searchInput = input - }} - value={selectedItems.length > 0 ? placeholder : ''} - placeholder={placeholder} - onChange={this.handleKeywordChange.bind(this)} - onKeyDown={this.handleKeyDown.bind(this)} - onFocus={onFocus.bind(this)} - onBlur={onBlur.bind(this)} - readOnly - /> -- )} - - 0 } - )} - /> - {clearable && selectedItems.length > 0 && ( - - )} - -+ ) : ( + + ) } - +const SelectInput = forwardRef((props, ref) => { + return +}) export default SelectInput diff --git a/components/select/SingleInput.js b/components/select/SingleInput.js new file mode 100644 index 000000000..0083c4965 --- /dev/null +++ b/components/select/SingleInput.js @@ -0,0 +1,93 @@ +import React, { useState, useEffect } from 'react' +import classNames from 'classnames' +import { transKeys } from './utils' + +// 单选输入框 +const SingleInput = (props) => { + let { + placeholder, + dropdownShow, + disabled, + clearable, + onFocus, + theme, + onBlur, + onClick, + selectedItems: propsSelectItem, + handleKeyDown, + onClear, + fieldNames, + isFocus + } = props + const [cacheselectedItems, setCacheselectedItems] = useState(propsSelectItem || []) + useEffect(() => { + setCacheselectedItems(propsSelectItem) + }, [propsSelectItem]) + + const handleClear = (e) => { + e.stopPropagation() + + onClear() + setCacheselectedItems([]) + } + + const icon = dropdownShow ? 'up' : 'down' + + const selectedItems = propsSelectItem.length > 0 ? propsSelectItem : cacheselectedItems + + placeholder = selectedItems.length > 0 ? selectedItems[0][transKeys(fieldNames, 'title')] : placeholder + + return ( + ++ ) +} + +export default SingleInput diff --git a/components/select/index.d.ts b/components/select/index.d.ts new file mode 100644 index 000000000..23dd47a31 --- /dev/null +++ b/components/select/index.d.ts @@ -0,0 +1,51 @@ +import { CSSProperties } from "react" + +type DataItem = { + id: string | number + title: string + disabled?: boolean + children?: DataItem[] +} +export type DataSource = { + url: string + type?: 'get' | 'post' + data?: object + params?: object + headers?: object + mode?: 'same-origin' | 'cors' | 'no-cors' | 'navigate' + transformResponse?: (response: object) => DataItem[] +} +type FieldNames = { + id?: string + title?: string + disabled?: string + children?: string +} +const DataSourFun: (keyword: string) => DataSource +const FilterOptionFun: (keyword: string, item: DataItem) => boolean +interface Props { + type?: 'single' | 'multiple' + data?: DataItem[] + fieldNames?: FieldNames + dataSource?: DataSource | DataSourFun + value?: string | string[] + defaultValue?: string | string[] + showCheckAll?: boolean + showJustSelected?: boolean + multipleWrap?: 'wrap' | 'nowrap' + searchable?: boolean + filterOption?: FilterOptionFun + clearable?: boolean + autoload?: boolean + disabled?: boolean + placeholder?: string + emptyContent?: string | JSX.Element + style?: CSSProperties + optionWidth?: number + onChange?: (selectedIds: string[], changedItem: DataItem) => void + render?: (item: DataItem, selected: boolean) => JSX.Element + overlayClassName?: string + setOverlayContainer?: (triggerNode: any) => any +} +declare const Select: React.ComponentType0) + })} + > ++ {(dropdownShow || selectedItems.length === 0) && ( ++ {selectedItems[0] && selectedItems[0][transKeys(fieldNames, 'title')]} ++0 + })} + > + 0 ? placeholder : ''} + placeholder={placeholder} + onKeyDown={handleKeyDown} + onFocus={onFocus} + onBlur={onBlur} + readOnly + /> ++ )} + + 0 + })} + /> + {clearable && selectedItems.length > 0 && ( + + )} + ++export default Select diff --git a/components/select/index.js b/components/select/index.js index 5243259eb..45b143b9a 100644 --- a/components/select/index.js +++ b/components/select/index.js @@ -1,6 +1,14 @@ +import React from 'react' import Select from './Select' -import SelectLegacy from './select-legacy' +import SelectV1 from './select-legacy/select-v1' +import SelectV2 from './select-legacy/select-v2' import './style/index' -import SwitchVersion from '../_util/SwitchVersion' -export default SwitchVersion(Select, SelectLegacy) +const SelectWrapper = ({ legacy, legacyV2, ...props }) => { + let WrapperComponent = legacy ? SelectV1 : Select + WrapperComponent = legacyV2 ? SelectV2 : WrapperComponent + + return +} + +export default SelectWrapper diff --git a/components/select/select-legacy/Option.js b/components/select/select-legacy/select-v1/Option.js similarity index 100% rename from components/select/select-legacy/Option.js rename to components/select/select-legacy/select-v1/Option.js diff --git a/components/select/select-legacy/Select.js b/components/select/select-legacy/select-v1/Select.js similarity index 66% rename from components/select/select-legacy/Select.js rename to components/select/select-legacy/select-v1/Select.js index fcb5abcfd..9eab0ca8e 100644 --- a/components/select/select-legacy/Select.js +++ b/components/select/select-legacy/select-v1/Select.js @@ -5,10 +5,10 @@ import PropTypes from 'prop-types' import shallowEqual from 'shallowequal' import debounce from 'lodash/debounce' import cloneDeep from 'lodash/cloneDeep' -import Popper from '../../popper' +import Popper from '../../../popper' import SelectInput from './SelectInput' import SelectDropdown from './SelectDropdown' -import Provider from '../../context' +import Provider from '../../../context' import fetchJsonp from 'fetch-jsonp' class Select extends Component { autoloadFlag = true // 第一次自动加载数据标识 @@ -58,11 +58,12 @@ class Select extends Component { constructor (props) { super(props) - let { - list - } = this.props + let { list } = this.props const dropdownItems = cloneDeep(list) - const selectedItems = this.resetSelectedItems(this.props.value, dropdownItems) + const selectedItems = this.resetSelectedItems( + this.props.value, + dropdownItems + ) const searchable = this.getSearchable() this.debouncedFilterItems = debounce(this.onFilterItems.bind(this), 300) this.clickOutsideHandel = this.clickOutside.bind(this) @@ -114,16 +115,26 @@ class Select extends Component { componentWillReceiveProps (props) { if (!shallowEqual(props.value, this.props.value)) { - const selectedItems = this.resetSelectedItems(props.value, this.state.dropdownItems) // 异步获取时会从内部改变dropdownItems，所以不能从list取 - - this.setState({ - selectedItems - }, () => { - // this.onChange() - }) + const selectedItems = this.resetSelectedItems( + props.value, + this.state.dropdownItems + ) // 异步获取时会从内部改变dropdownItems，所以不能从list取 + + this.setState( + { + selectedItems + }, + () => { + // this.onChange() + } + ) } if (!shallowEqual(props.list, this.props.list)) { - const selectedItems = this.resetSelectedItems(props.value, props.list, true) + const selectedItems = this.resetSelectedItems( + props.value, + props.list, + true + ) this.setState({ selectedItems, @@ -133,9 +144,7 @@ class Select extends Component { } getSearchable () { - let { - searchable - } = this.props + let { searchable } = this.props if (this.isRemote()) { return true @@ -157,25 +166,28 @@ class Select extends Component { } isRemote () { - let { - origin - } = this.props + let { origin } = this.props return origin && !!origin.url } resetSelectedItems (value, dropdownItems, listChanged = false) { const values = this.parseValue(value) - const selectedItems = listChanged && this.props.mode === 'multiple' ? this.state.selectedItems : [] // 如果是多选，dropdownItems有改动，需要保留之前的选中值 - - dropdownItems && dropdownItems.map(item => { - if (values.indexOf(item.id) !== -1) { - let itemIndex = selectedItems.findIndex((sItem) => { // 多选时检查是否已选中 - return sItem.id === item.id - }) - - itemIndex === -1 && selectedItems.push(item) - } - }) + const selectedItems = + listChanged && this.props.mode === 'multiple' + ? this.state.selectedItems + : [] // 如果是多选，dropdownItems有改动，需要保留之前的选中值 + + dropdownItems && + dropdownItems.map(item => { + if (values.indexOf(item.id) !== -1) { + let itemIndex = selectedItems.findIndex(sItem => { + // 多选时检查是否已选中 + return sItem.id === item.id + }) + + itemIndex === -1 && selectedItems.push(item) + } + }) return selectedItems } @@ -188,10 +200,7 @@ class Select extends Component { } onEnterSelect () { - const { - dropdownItems, - focusedIndex - } = this.state + const { dropdownItems, focusedIndex } = this.state const item = dropdownItems[focusedIndex] this.onClickOption(item, focusedIndex) @@ -212,18 +221,23 @@ class Select extends Component { let changedItems = [] dropdownItems.forEach(item => { if (!item.disabled && this.matchFilter(item)) { - if (!_selectedItems.map(selectItem => selectItem.id).includes(item.id)) { + if ( + !_selectedItems.map(selectItem => selectItem.id).includes(item.id) + ) { _selectedItems.push(item) changedItems.push(item) } } }) - this.setState({ - selectedItems: _selectedItems - }, () => { - this.selectInput.focus() - this.onChange(changedItems) - }) + this.setState( + { + selectedItems: _selectedItems + }, + () => { + this.selectInput.focus() + this.onChange(changedItems) + } + ) } onClickOption (item, index) { @@ -233,7 +247,7 @@ class Select extends Component { let focusedIndex = index if (this.props.mode === 'multiple') { - let itemIndex = this.state.selectedItems.findIndex((sItem) => { + let itemIndex = this.state.selectedItems.findIndex(sItem => { return sItem.id === item.id }) if (itemIndex === -1) { @@ -245,33 +259,37 @@ class Select extends Component { selectedItems = [item] } - this.setState({ - selectedItems, - focusedIndex - }, () => { - if (this.props.mode !== 'multiple') { - this.hideDropdown() - } else { - this.selectInput.focus() - this.clearKeyword() // 多选状态清空筛选 - } + this.setState( + { + selectedItems, + focusedIndex + }, + () => { + if (this.props.mode !== 'multiple') { + this.hideDropdown() + } else { + this.selectInput.focus() + this.clearKeyword() // 多选状态清空筛选 + } - this.onChange(item) - }) + this.onChange(item) + } + ) } clearKeyword () { - this.setState({ - keyword: '' - }, () => { - this.selectInput.clearInput() - }) + this.setState( + { + keyword: '' + }, + () => { + this.selectInput.clearInput() + } + ) } - handleInputClick = (e) => { - let { - dropdownShow - } = this.state + handleInputClick = e => { + let { dropdownShow } = this.state if (dropdownShow) { this.hideDropdown() @@ -289,13 +307,14 @@ class Select extends Component { } hideDropdown () { - this.state.dropdownShow === true && this.setState({dropdownShow: false}, () => { - this.clearKeyword() - }) + this.state.dropdownShow === true && + this.setState({ dropdownShow: false }, () => { + this.clearKeyword() + }) } showDropdown () { - this.state.dropdownShow === false && this.setState({dropdownShow: true}) + this.state.dropdownShow === false && this.setState({ dropdownShow: true }) this.selectInput.focus() } @@ -308,24 +327,32 @@ class Select extends Component { }) selectedItems.splice(sIndex, 1) - this.setState({ - selectedItems - }, () => { - this.selectInput.focus() - this.onChange(item) - }) + this.setState( + { + selectedItems + }, + () => { + this.selectInput.focus() + this.onChange(item) + } + ) } // 全部删除 deleteAllItems () { const focusedIndex = this.resetFocusedIndex() const changedItems = [...this.state.selectedItems] - this.setState({ - focusedIndex, - selectedItems: [] - }, () => { - this.onChange(this.props.mode === 'multiple' ? changedItems : changedItems[0]) - this.onFilterItems('') - }) + this.setState( + { + focusedIndex, + selectedItems: [] + }, + () => { + this.onChange( + this.props.mode === 'multiple' ? changedItems : changedItems[0] + ) + this.onFilterItems('') + } + ) } remoteSearch (keyword) { @@ -339,9 +366,15 @@ class Select extends Component { jsonpCallback = 'callback', ...options } = this.props.origin - keyword = !keyword && this.autoloadFlag && this.props.autoload ? this.props.origin.keyword : keyword + keyword = + !keyword && this.autoloadFlag && this.props.autoload + ? this.props.origin.keyword + : keyword this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 - url = url.indexOf('?') === -1 ? `${url}?${[key]}=${keyword}` : `${url}&${[key]}=${keyword}` + url = + url.indexOf('?') === -1 + ? `${url}?${[key]}=${keyword}` + : `${url}&${[key]}=${keyword}` if (type.toUpperCase() === 'POST') { options.body = JSON.stringify(data) @@ -351,23 +384,33 @@ class Select extends Component { }) if (type.toUpperCase() === 'JSONP') { - const _o = {jsonpCallback: jsonpCallback, jsonpCallbackFunction: jsonpCallback} - fetchJsonp(url, _o).then((res) => res.json()).then((json) => { this._setDropdownItems(json, func) }) + const _o = { + jsonpCallback: jsonpCallback, + jsonpCallbackFunction: jsonpCallback + } + fetchJsonp(url, _o) + .then(res => res.json()) + .then(json => { + this._setDropdownItems(json, func) + }) } else { /* eslint-disable */ fetch(url, { method: type, ...options }) - .then(response => response.json()) - .then(res => { - this._setDropdownItems(res, func) - }, err => { - error && error(err) - this.setState({ - fetching: false - }) - }) + .then(response => response.json()) + .then( + res => { + this._setDropdownItems(res, func) + }, + err => { + error && error(err) + this.setState({ + fetching: false + }) + } + ) } } _setDropdownItems(res, func) { @@ -378,7 +421,11 @@ class Select extends Component { dropdownItems = res.data } if (Array.isArray(dropdownItems)) { - const selectedItems = this.resetSelectedItems(this.props.value, dropdownItems, true) + const selectedItems = this.resetSelectedItems( + this.props.value, + dropdownItems, + true + ) this.setState({ dropdownItems, selectedItems @@ -388,30 +435,41 @@ class Select extends Component { fetching: false }) } - onFilterItems (keyword) { - this.setState({ - keyword - }, ()=>this.resetFocusedIndex()) + onFilterItems(keyword) { + this.setState( + { + keyword + }, + () => this.resetFocusedIndex() + ) if (this.props.origin) { // this.setState({ // dropdownItems: [] // }) - if (this.props.autoload || keyword.toString().length >= this.state.queryLength) { + if ( + this.props.autoload || + keyword.toString().length >= this.state.queryLength + ) { this.remoteSearch(keyword) } } } - matchFilter (item) { - const { - searchable, - keyword - } = this.state - return this.isRemote() || (!searchable || !keyword) || (searchable && keyword && (String(item.id).includes(keyword) || String(item.name).includes(keyword))) + matchFilter(item) { + const { searchable, keyword } = this.state + return ( + this.isRemote() || + !searchable || + !keyword || + (searchable && + keyword && + (String(item.id).includes(keyword) || + String(item.name).includes(keyword))) + ) } - resetFocusedIndex (setState = true) { + resetFocusedIndex(setState = true) { let focusedIndex = -1 this.state.dropdownItems.every(item => { @@ -421,32 +479,32 @@ class Select extends Component { } return true }) - setState && this.setState({ - focusedIndex - }) + setState && + this.setState({ + focusedIndex + }) return focusedIndex } - setFocusedIndex (focusedIndex) { - this.setState({focusedIndex}) + setFocusedIndex(focusedIndex) { + this.setState({ focusedIndex }) } - moveFocusedIndex (direction) { - let { - focusedIndex - } = this.state - const { - dropdownItems - } = this.state + moveFocusedIndex(direction) { + let { focusedIndex } = this.state + const { dropdownItems } = this.state if (direction === 'up') { - dropdownItems.slice(0, focusedIndex).reverse().every(item => { - focusedIndex-- - if (!item.disabled && this.matchFilter(item)) { - return false - } - return true - }) + dropdownItems + .slice(0, focusedIndex) + .reverse() + .every(item => { + focusedIndex-- + if (!item.disabled && this.matchFilter(item)) { + return false + } + return true + }) } else { dropdownItems.slice(focusedIndex + 1).every(item => { focusedIndex++ @@ -461,10 +519,8 @@ class Select extends Component { }) } - localeDatasProps (key) { - const { - localeDatas - } = this.props + localeDatasProps(key) { + const { localeDatas } = this.props if (this.props[key]) { return this.props[key] } else { @@ -472,7 +528,7 @@ class Select extends Component { } } - render () { + render() { const { mode, showCheckAll, @@ -504,10 +560,20 @@ class Select extends Component { } return ( - -{ this.selectInputContainer = node }}> ++{ + this.selectInputContainer = node + }} + >- { children } + {children}{ this.selectInput = node }} + ref={node => { + this.selectInput = node + }} mode={mode} disabled={disabled} searchable={searchable} @@ -519,8 +585,8 @@ class Select extends Component { multipleMode={multipleMode} container={this.selectInputContainer} moveFocusedIndex={this.moveFocusedIndex.bind(this)} - onClick={()=>{ - if(this.props.open) { + onClick={() => { + if (this.props.open) { this.handleInputClick() } onClick() @@ -533,14 +599,14 @@ class Select extends Component { onEnterSelect={this.onEnterSelect.bind(this)} /> + {loading && (@@ -86,7 +90,8 @@ export default class SelectDropdown extends Component { className={classNames('hi-select__dropdown--item', { 'is-active': isSelected, 'is-disabled': isDisabled, - 'hi-select__dropdown--item-default': !item.children && !dropdownRender + 'hi-select__dropdown--item-default': + !item.children && !dropdownRender })} onClick={e => this.onClickOption(e, item, index)} key={item.id} diff --git a/components/select/select-legacy/SelectInput.js b/components/select/select-legacy/select-v1/SelectInput.js similarity index 100% rename from components/select/select-legacy/SelectInput.js rename to components/select/select-legacy/select-v1/SelectInput.js diff --git a/components/select/select-legacy/common.js b/components/select/select-legacy/select-v1/common.js similarity index 100% rename from components/select/select-legacy/common.js rename to components/select/select-legacy/select-v1/common.js diff --git a/components/select/select-legacy/index.js b/components/select/select-legacy/select-v1/index.js similarity index 100% rename from components/select/select-legacy/index.js rename to components/select/select-legacy/select-v1/index.js diff --git a/components/select/select-legacy/select-v2/Select.js b/components/select/select-legacy/select-v2/Select.js new file mode 100644 index 000000000..6d1a826a9 --- /dev/null +++ b/components/select/select-legacy/select-v2/Select.js @@ -0,0 +1,693 @@ +import React, { Component } from 'react' +import ReactDOM from 'react-dom' +import classNames from 'classnames' +import PropTypes from 'prop-types' +import debounce from 'lodash/debounce' +import cloneDeep from 'lodash/cloneDeep' +import Popper from '../../../popper' +import SelectInput from './SelectInput' +import SelectDropdown from './SelectDropdown' +import Provider from '../../../context' +import fetchJsonp from 'fetch-jsonp' +import qs from 'qs' +import _ from 'lodash' +class Select extends Component { + autoloadFlag = true // 第一次自动加载数据标识 + + static propTypes = { + type: PropTypes.oneOf(['single', 'multiple']), + multipleWrap: PropTypes.oneOf(['wrap', 'nowrap']), + data: PropTypes.array, + dataSource: PropTypes.oneOfType([PropTypes.object, PropTypes.func]), + defaultValue: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array, + PropTypes.bool, + PropTypes.number + ]), + value: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.array, + PropTypes.bool, + PropTypes.number + ]), + showCheckAll: PropTypes.bool, + autoload: PropTypes.bool, + searchable: PropTypes.bool, + filterOption: PropTypes.func, + clearable: PropTypes.bool, + disabled: PropTypes.bool, + placeholder: PropTypes.string, + emptyContent: PropTypes.string, + optionWidth: PropTypes.number, + style: PropTypes.object, + onChange: PropTypes.func, + render: PropTypes.func, + open: PropTypes.bool + } + + static defaultProps = { + data: [], + type: 'single', + multipleWrap: 'nowrap', + disabled: false, + clearable: true, + defaultValue: '', + autoload: false, + showCheckAll: false, + open: true, + onClick: () => {}, + onBlur: () => {}, + onFocus: () => {} + } + + constructor (props) { + super(props) + + const { data, value, defaultValue } = props + const dropdownItems = cloneDeep(data) + const initialValue = value === undefined ? defaultValue : value + const selectedItems = this.resetSelectedItems( + initialValue, + dropdownItems, + [] + ) + + const searchable = this.getSearchable() + this.debouncedFilterItems = debounce(this.onFilterItems.bind(this), 300) + this.clickOutsideHandel = this.clickOutside.bind(this) + + this.state = { + searchable, + queryLength: 1, + focusedIndex: 0, + selectedItems, + cacheSelectedItems: selectedItems, + dropdownItems, + dropdownShow: false, + fetching: false, + keyword: '', + filterText: '', + searchInput: { + width: 2 + } + } + } + + getChildContext () { + return { + component: this + } + } + + componentWillMount () { + if (this.isRemote() && this.props.autoload) { + this.remoteSearch() + } + } + + componentDidMount () { + window.addEventListener('click', this.clickOutsideHandel) + this.resetFocusedIndex() + } + + componentWillUnmount () { + window.removeEventListener('click', this.clickOutsideHandel) + } + + clickOutside (e) { + const selectInput = ReactDOM.findDOMNode(this.selectInput) + if ( + (selectInput && selectInput.contains(e.target)) || + (e.target.tagName === 'INPUT' && + e.target.className.includes('hi-select__dropdown__searchbar--input')) + ) { + return + } + this.hideDropdown() + } + + componentWillReceiveProps (nextProps) { + if (!_.isEqual(nextProps.data, this.props.data)) { + const selectedItems = this.resetSelectedItems( + nextProps.value || this.state.selectedItems, + nextProps.data, + [] + ) + this.setState({ + selectedItems, + cacheSelectedItems: selectedItems, + dropdownItems: cloneDeep(nextProps.data) + }) + } else { + if (!_.isEqual(nextProps.value, this.props.value)) { + const selectedItems = this.resetSelectedItems( + nextProps.value, + this.state.dropdownItems, + [] + ) // 异步获取时会从内部改变dropdownItems，所以不能从list取 + this.setState({ + selectedItems, + cacheSelectedItems: selectedItems + }) + } + } + } + + getSearchable () { + const { searchable } = this.props + + if (this.isRemote()) { + return true + } + return searchable + } + + parseValue (value = this.props.value) { + if (Array.isArray(value)) { + return value.map(v => { + if (typeof v === 'object') { + return v.id + } else { + return v + } + }) + } else { + return [value] + } + } + + isRemote () { + const { dataSource, onSearch } = this.props + return onSearch || dataSource + } + + resetSelectedItems (value, dropdownItems = [], reviceSelectedItems = []) { + const values = this.parseValue(value) + let selectedItems = [] + dropdownItems.forEach(item => { + if (values.includes(item.id)) { + selectedItems.push(item) + } + }) + return _.uniqBy(reviceSelectedItems.concat(selectedItems), 'id') + } + + onEnterSelect () { + const { dropdownItems, focusedIndex } = this.state + const item = dropdownItems[focusedIndex] + this.onClickOption(item, focusedIndex) + } + + onChange (selectedItems, changedItems, callback, cacheSelectedItems) { + const { onChange, value } = this.props + value === undefined && + this.setState( + { + selectedItems + }, + callback + ) + const selectedIds = selectedItems.map(({ id }) => id) + onChange && onChange(selectedIds, changedItems) + } + + checkAll (filterItems, e) { + // 全选 + e && e.stopPropagation() + + const { selectedItems } = this.state + let _selectedItems = [...selectedItems] + let changedItems = [] + filterItems.forEach(item => { + if (!item.disabled && this.matchFilter(item)) { + if ( + !_selectedItems.map(selectItem => selectItem.id).includes(item.id) + ) { + _selectedItems.push(item) + changedItems.push(item) + } + } + }) + this.onChange(_selectedItems, changedItems, () => {}, _selectedItems) + } + + onClickOption (item, index) { + if (!item || item.disabled) return + + let selectedItems = this.state.selectedItems.concat() + let cacheSelectedItems = this.state.selectedItems.concat() + let focusedIndex = index + + if (this.props.type === 'multiple') { + let itemIndex = this.state.selectedItems.findIndex(sItem => { + return sItem.id === item.id + }) + if (itemIndex === -1) { + selectedItems.push(item) + if ( + !cacheSelectedItems.map(cacheItem => cacheItem.id).includes(item.id) + ) { + cacheSelectedItems.push(item) + } + } else { + selectedItems.splice(itemIndex, 1) + } + } else { + selectedItems = [item] + this.setState({ + cacheSelectedItems: [item] + }) + } + + this.onChange( + selectedItems, + item, + () => { + this.setState({ + focusedIndex, + cacheSelectedItems: + this.props.type === 'multiple' ? cacheSelectedItems : [item] + }) + }, + this.props.type === 'multiple' ? cacheSelectedItems : [item] + ) + if (this.props.type !== 'multiple') { + this.hideDropdown() + } + } + + clearKeyword () { + this.setState( + { + keyword: '' + }, + () => { + this.selectInput.clearInput() + } + ) + } + + handleInputClick = e => { + let { dropdownShow } = this.state + if (dropdownShow) { + this.hideDropdown() + return + } + + !this.getSearchable() && this.selectInput.focus() + if (this.props.disabled) { + return + } + + if (dropdownShow === false) { + this.showDropdown() + } + } + + hideDropdown () { + this.state.dropdownShow === true && + this.setState( + { dropdownShow: false, cacheSelectedItems: this.state.selectedItems }, + () => { + this.clearKeyword() + } + ) + } + + showDropdown () { + this.state.dropdownShow === false && this.setState({ dropdownShow: true }) + } + + deleteItem (item) { + if (item.disabled) return + let selectedItems = this.state.selectedItems.concat() + const sIndex = selectedItems.findIndex((obj, index, arr) => { + return obj.id === item.id + }) + + selectedItems.splice(sIndex, 1) + this.onChange( + selectedItems, + item, + () => { + !this.getSearchable() && this.selectInput.focus() + }, + selectedItems + ) + } + // 全部删除 + deleteAllItems () { + const { type } = this.props + const focusedIndex = this.resetFocusedIndex() + const changedItems = [...this.state.selectedItems] + this.onChange( + [], + type === 'multiple' ? changedItems : changedItems[0], + () => { + this.setState({ focusedIndex }) + this.onFilterItems('') + }, + [] + ) + } + + remoteSearch (keyword) { + const { onSearch, dataSource, autoload } = this.props + if (onSearch && typeof onSearch === 'function') { + this.setState({ + fetching: true + }) + onSearch(keyword).finally(() => { + this.setState({ fetching: false }) + }) + } else { + const _dataSource = + typeof dataSource === 'function' ? dataSource(keyword) : dataSource + let { + url, + transformResponse, + error, + params, + headers, + mode, + data = {}, + type = 'GET', + key, + jsonpCallback = 'callback', + ...options + } = _dataSource + + keyword = + !keyword && this.autoloadFlag && autoload + ? _dataSource.keyword + : keyword + this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词 + Object.assign(options, { mode }, { headers }) + + const queryParams = qs.stringify( + Object.assign({}, params, key && { [key]: keyword }) + ) + if (!_.isEmpty(queryParams)) { + url = url.includes('?') + ? `${url}&${queryParams}` + : `${url}?${queryParams}` + } + if (type.toUpperCase() === 'POST') { + options.body = JSON.stringify(data) + } + + this.setState({ + fetching: true + }) + + if (type.toUpperCase() === 'JSONP') { + const _o = { + jsonpCallback: jsonpCallback, + jsonpCallbackFunction: jsonpCallback + } + fetchJsonp(url, _o) + .then(res => res.json()) + .then(json => { + this._setDropdownItems(json, transformResponse) + }) + } else { + /* eslint-disable */ + fetch(url, { + method: type, + ...options + }) + .then(response => response.json()) + .then( + res => { + this._setDropdownItems(res, transformResponse) + }, + err => { + error && error(err) + this.setState({ + fetching: false + }) + } + ) + } + } + } + _setDropdownItems(res, func) { + let dropdownItems = [] + if (func) { + dropdownItems = func(res) + } else { + dropdownItems = res.data + } + if (Array.isArray(dropdownItems)) { + const reviceSelectedItems = + this.props.type === 'multiple' + ? (this.props.dataSource && this.state.selectedItems) || [] + : this.state.cacheSelectedItems + const selectedItems = this.resetSelectedItems( + this.props.value, + dropdownItems, + reviceSelectedItems + ) + this.setState({ + dropdownItems, + selectedItems + }) + } + this.setState({ + fetching: false + }) + } + onFilterItems(keyword) { + const { onSearch, dataSource, autoload } = this.props + this.setState( + { + keyword: keyword + }, + () => this.resetFocusedIndex() + ) + + if (dataSource) { + if (autoload || (keyword && keyword.length >= this.state.queryLength)) { + this.remoteSearch(keyword) + } + } else if (onSearch) { + this.remoteSearch(keyword) + } + } + + matchFilter(item) { + const { filterOption } = this.props + const { searchable, keyword } = this.state + + const shouldMatch = this.isRemote() || !searchable || !keyword + + if (typeof filterOption === 'function') { + return shouldMatch || filterOption(keyword, item) + } + + return ( + shouldMatch || + String(item.id).includes(keyword) || + String(item.title).includes(keyword) + ) + } + + resetFocusedIndex(setState = true) { + let focusedIndex = -1 + + this.state.dropdownItems.every(item => { + focusedIndex++ + if (!item.disabled && this.matchFilter(item)) { + return false + } + return true + }) + setState && + this.setState({ + focusedIndex + }) + return focusedIndex + } + + setFocusedIndex(focusedIndex) { + this.setState({ focusedIndex }) + } + + moveFocusedIndex(direction) { + let { focusedIndex } = this.state + const { dropdownItems } = this.state + + if (direction === 'up') { + dropdownItems + .slice(0, focusedIndex) + .reverse() + .every(item => { + focusedIndex-- + if (!item.disabled && this.matchFilter(item)) { + return false + } + return true + }) + } else { + dropdownItems.slice(focusedIndex + 1).every(item => { + focusedIndex++ + if (!item.disabled && this.matchFilter(item)) { + return false + } + return true + }) + } + this.setState({ + focusedIndex + }) + } + + localeDatasProps(key) { + const { localeDatas } = this.props + if (this.props[key]) { + return this.props[key] + } else { + return localeDatas.select[key] + } + } + + render() { + const { + type, + showCheckAll, + className, + disabled, + clearable, + style, + children, + optionWidth, + render, + multipleWrap, + onClick, + onBlur, + onFocus, + dataSource, + filterOption, + onSearch, + theme, + localeDatas, + preventOverflow, + placement + } = this.props + const placeholder = this.localeDatasProps('placeholder') + const emptyContent = this.localeDatasProps('emptyContent') + const searchPlaceholder = this.localeDatasProps('searchPlaceholder') + const { + selectedItems, + cacheSelectedItems, + dropdownItems, + searchable, + dropdownShow, + focusedIndex, + fetching + } = this.state + const extraClass = { + 'is-multiple': type === 'multiple', + 'is-single': type === 'single' + } + const selectInputWidth = this.selectInputContainer + ? this.selectInputContainer.getBoundingClientRect().width + : null + return ( + ++ ) + } +} +Select.childContextTypes = { + component: PropTypes.any +} + +export default Provider(Select) diff --git a/components/select/select-legacy/select-v2/SelectDropdown.js b/components/select/select-legacy/select-v2/SelectDropdown.js new file mode 100644 index 000000000..158b94aaf --- /dev/null +++ b/components/select/select-legacy/select-v2/SelectDropdown.js @@ -0,0 +1,296 @@ +import React, { Component } from 'react' +import classNames from 'classnames' +import Checkbox from '../../../checkbox' +import Loading from '../../../loading' +import Icon from '../../../icon' + +class SelectDropdown extends Component { + constructor (props) { + super(props) + this.state = { + filterItems: this.props.dropdownItems, + searchbarValue: '', + cachedropdownItems: this.props.dropdownItems + } + } + static getDerivedStateFromProps (nextProps, prevState) { + const { selectedItems, mode, isOnSearch, dropdownItems, show } = nextProps + const { searchbarValue, cachedropdownItems } = prevState + const _filterItems = + selectedItems.length > 0 && + searchbarValue.length === 0 && + mode === 'single' && + isOnSearch + ? cachedropdownItems + : dropdownItems + const _searchbarValue = show ? searchbarValue : '' + return { filterItems: _filterItems, searchbarValue: _searchbarValue } + } + componentDidMount () { + this.focus() + } + focus = () => { + this.props.searchable && setTimeout(() => this.searchbar.focus(), 0) + } + onClickOption (e, item, index) { + e.stopPropagation() + e.preventDefault() + if (item.disabled) { + return + } + this.props.mode === 'single' && + this.props.isOnSearch && + this.setState({ + cachedropdownItems: this.props.dropdownItems + }) + this.props.onClickOption(item, index) + } + filterOptions = keyword => { + const { dropdownItems, filterOption } = this.props + let filterItems = [] + if (typeof filterOption === 'function' || keyword === '') { + filterItems = dropdownItems + } else { + dropdownItems.map(item => { + String(item.title).includes(keyword) && filterItems.push(item) + }) + } + this.setState({ + filterItems: filterItems, + searchbarValue: keyword + }) + } + searchEvent (e) { + const filterText = e.target.value + this.filterOptions(filterText) + this.props.onSearch(filterText) + + this.setState({ + searchbarValue: filterText + }) + } + hightlightKeyword (text, uniqueKey) { + const { searchbarValue } = this.state + let _keyword = this.state.searchbarValue + _keyword = searchbarValue.includes('[') + ? _keyword.replace(/\[/gi, '\\[') + : _keyword + _keyword = searchbarValue.includes('(') + ? _keyword.replace(/\(/gi, '\\(') + : _keyword + _keyword = searchbarValue.includes(')') + ? _keyword.replace(/\)/gi, '\\)') + : _keyword + + let parts = text.split(new RegExp(`(${_keyword})`, 'gi')) + return this.state.searchbarValue.length > 0 ? ( +{ + this.selectInputContainer = node + }} + > ++ {children} +{ + this.selectInput = node + }} + theme={theme} + mode={type} + disabled={disabled} + searchable={searchable} + clearable={clearable} + show={dropdownShow && this.props.open} + dropdownShow={dropdownShow} + placeholder={placeholder} + selectedItems={selectedItems} + dropdownItems={dropdownItems} + multipleMode={multipleWrap} + container={this.selectInputContainer} + moveFocusedIndex={this.moveFocusedIndex.bind(this)} + onClick={() => { + if (this.props.open) { + this.handleInputClick() + } + onClick() + }} + onBlur={onBlur} + onFocus={onFocus} + onDelete={this.deleteItem.bind(this)} + onClear={this.deleteAllItems.bind(this)} + onSearch={this.debouncedFilterItems.bind(this)} + onEnterSelect={this.onEnterSelect.bind(this)} + /> + + {dropdownShow && this.props.open && ( + ++ )} + + {parts.map((part, i) => + part === searchbarValue ? ( + + {part} + + ) : ( + part + ) + )} +
+ ) : ( + text + ) + } + onMouseEnter (item, index) { + !item.disabled && this.props.setFocusedIndex(index) + } + + itemSelected (item) { + const selectedItems = this.props.selectedItems + + return selectedItems.map(item => item.id).indexOf(item.id) > -1 + } + cleanSearchbarValue (e) { + e.stopPropagation() + const filterText = '' + this.filterOptions(filterText) + this.props.onSearch(filterText) + + this.setState({ + searchbarValue: filterText + }) + } + handleKeyDown (evt) { + if (evt.keyCode === 13) { + this.props.onEnterSelect() + } + + if (evt.keyCode === 38) { + evt.preventDefault() + this.props.moveFocusedIndex('up') + } + if (evt.keyCode === 40) { + evt.preventDefault() + this.props.moveFocusedIndex('down') + } + } + renderOption (mode, isSelected, item) { + if (item.children) { + return item.children + } + if (this.props.dropdownRender) { + return this.props.dropdownRender(item, isSelected) + } + const paddingNum = mode === 'multiple' ? 48 : 24 + const style = { + width: this.props.optionWidth + ? this.props.optionWidth - paddingNum + : this.props.selectInputWidth + ? this.props.selectInputWidth - paddingNum + : null + } + + return ( ++ {mode === 'multiple' && ( + + ) + } + + render () { + const { + mode, + focusedIndex, + matchFilter, + noFoundTip, + loading, + optionWidth, + showCheckAll, + dropdownRender, + theme, + searchable, + onFocus, + onBlur, + searchPlaceholder, + localeMap + } = this.props + const { filterItems, searchbarValue } = this.state + let matched = 0 + const style = optionWidth && { + width: optionWidth + } + + return ( ++ + )} + {mode === 'single' && ( ++ {this.props.isOnSearch + ? item.title + : this.hightlightKeyword(item.title, item.id)} +++ {this.props.isOnSearch + ? item.title + : this.hightlightKeyword(item.title, item.id)} ++ )} + {mode === 'single' && isSelected && ( ++ ++ )} ++ {searchable && ( ++ ) + } +} + +export default SelectDropdown diff --git a/components/select/select-legacy/select-v2/SelectInput.js b/components/select/select-legacy/select-v2/SelectInput.js new file mode 100644 index 000000000..8b2c4037d --- /dev/null +++ b/components/select/select-legacy/select-v2/SelectInput.js @@ -0,0 +1,310 @@ +import React, { Component } from 'react' +import classNames from 'classnames' +import { getTextWidth } from './common.js' + +class SelectInput extends Component { + constructor (props) { + super(props) + + this.state = { + showCount: 0, + value: '', + inputStyle: { + width: 2 + }, + cacheselectedItems: [] + } + } + + calShowCountFlag = true + componentDidUpdate () { + if ( + this.props.multipleMode === 'nowrap' && + this.calShowCountFlag && + this.itemsRef + ) { + // 多选超过一行时以数字显示 + const itemsRect = this.itemsRef.getBoundingClientRect() + let width = 0 + let showCount = 0 + const items = this.itemsRef.querySelectorAll('.hi-select__input--item') + + for (const item of items) { + const itemRect = item.getBoundingClientRect() + width += itemRect.width + if ( + width + 50 < itemsRect.width || + (width > itemsRect.width && + width + 50 <= itemsRect.width && + showCount + 1 === items.length) + ) { + // 50是留给显示剩余选项的空间 + ++showCount + } else { + break + } + } + this.setState({ showCount }) + this.calShowCountFlag = false + } else { + this.calShowCountFlag = true + } + } + + static getDerivedStateFromProps (nextProps, nextState) { + return nextProps.dropdownShow + ? { + cacheselectedItems: + nextProps.selectedItems.length > 0 + ? nextProps.selectedItems + : nextState.cacheselectedItems + } + : { cacheselectedItems: nextProps.selectedItems } + } + focus () { + setTimeout(() => this.searchInput && this.searchInput.focus(), 0) + } + + handleKeywordChange (evt) { + var val = evt.target.value + this.setState({ + value: val, + inputStyle: { + width: getTextWidth(val) + } + }) + this.props.onSearch(evt.target.value) + } + + clearInput () { + this.searchInput && (this.searchInput.value = '') + this.setState({ + value: '' + }) + } + + handleKeyDown (evt) { + if (evt.keyCode === 13) { + this.props.onEnterSelect() + } + + if (evt.keyCode === 38) { + evt.preventDefault() + this.props.moveFocusedIndex('up') + } + if (evt.keyCode === 40) { + evt.preventDefault() + this.props.moveFocusedIndex('down') + } + } + + handleClear () { + this.setState({ + cacheselectedItems: [] + }) + this.props.onClear() + this.clearInput() + } + + renderMultiple () { + let { + placeholder, + selectedItems, + dropdownShow, + disabled, + searchable, + clearable, + multipleMode, + onFocus, + theme, + onBlur + } = this.props + let icon = dropdownShow ? 'up' : 'down' + let { showCount, value, inputStyle } = this.state + showCount = + showCount === 0 || this.calShowCountFlag + ? selectedItems.length + : showCount + + if (!selectedItems.length) { + inputStyle = { width: '100%' } + } + return ( +++ )} + {loading && ( ++++ { + this.searchbar = input + }} + value={searchbarValue} + onFocus={onFocus.bind(this)} + onBlur={onBlur.bind(this)} + clearabletrigger='always' + onKeyDown={this.handleKeyDown.bind(this)} + onInput={this.searchEvent.bind(this)} + onChange={this.searchEvent.bind(this)} + /> + {searchbarValue.length > 0 ? ( + + ) : null} + ++ )} + {!loading && ( ++ -
+ {filterItems.map((item, index) => {
+ if (matchFilter(item)) {
+ matched++
+ const isSelected = this.itemSelected(item)
+ const isDisabled = item.disabled
+ return (
+
+ {localeMap['checkAll']} ++ )} ++ {selectedItems.length === 0 && !value && ( ++ ) + } + + renderSingle () { + let { + placeholder, + selectedItems, + dropdownShow, + disabled, + clearable, + onFocus, + theme, + onBlur + } = this.props + + selectedItems = + selectedItems.length > 0 ? selectedItems : this.state.cacheselectedItems + placeholder = + selectedItems.length > 0 ? selectedItems[0].title : placeholder + let icon = dropdownShow ? 'up' : 'down' + + return ( +{placeholder}+ )} +{ + this.itemsRef = node + }} + > + {selectedItems.slice(0, showCount).map((item, index) => { + const _item = ( ++ + 0 } + )} + /> + {clearable && selectedItems.length > 0 && ( + + )} + +++ ) + return _item + })} + {showCount < selectedItems.length && ( +{item.title}+ { + e.stopPropagation() + this.props.onDelete(item) + }} + > + + ++ + + + {selectedItems.length - showCount} + ++ )} + {searchable && !disabled && ( ++ { + this.searchInput = input + }} + onChange={this.handleKeywordChange.bind(this)} + onKeyDown={this.handleKeyDown.bind(this)} + onFocus={onFocus.bind(this)} + onBlur={onBlur.bind(this)} + readOnly + /> ++ )} +++ ) + } + + render () { + let { mode } = this.props + + if (mode === 'multiple') { + return this.renderMultiple() + } else { + return this.renderSingle() + } + } +} + +export default SelectInput diff --git a/components/select/select-legacy/select-v2/__tests__/index.test.js b/components/select/select-legacy/select-v2/__tests__/index.test.js new file mode 100644 index 000000000..8164c2098 --- /dev/null +++ b/components/select/select-legacy/select-v2/__tests__/index.test.js @@ -0,0 +1,485 @@ +import React from 'react' +import { mount, shallow } from 'enzyme' +import { Simulate } from 'react-dom/test-utils' +import sinon from 'sinon' + +import Select from '../' +/* eslint-env jest */ +const changeCallback = jest.fn(items => items) +const successCallback = jest.fn(res => res.data) +const errorCallback = jest.fn(err => err) +jest.mock('lodash/debounce', () => jest.fn(fn => fn)) +function trigger(elem, event, code ){ + + var myEvent = document.createEvent('Event') // 初始化这个事件对象，为它提高需要的“特性” + if (code) { + myEvent.which = code; + myEvent.keyCode = code; // Ctrl + } + + myEvent.initEvent(event, true, true); //执行事件 + + elem.dispatchEvent(myEvent); + +} +const options = [ + { title: '电视', id: '3' }, + { title: '手机', id: '2' }, + { title: '笔记本', id: '4' }, + { title: '生活周边', id: '5' }, + { title: '办公', id: '6' } +] +const multiOptions = [ + { title: '手机', id: '2' }, + { title: '小米2', id: '2-1' }, + { title: '小米3', id: '2-2' }, + { title: '小米4', id: '2-3' }, + { title: '小米5', id: '2-4' }, + { title: '电脑', id: '3' }, + { title: '笔记本', id: '4' }, + { title: '生活周边', id: '5' }, + { title: '其它', id: '6' } +] +const types = ['single', 'multiple'] +describe('Select', () => { + beforeEach(() => { + jest.useFakeTimers() + }) + + afterEach(() => { + jest.useRealTimers() + }) + + it('should disabled', () => { + types.forEach(type => { + const wrapper = mount() + + expect(wrapper.find('.hi-select__input').hasClass('disabled')).toEqual(true) + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(false) + wrapper.unmount() + }) + }) + + it('should have default value', () => { + types.forEach(type => { + const wrapper = mount( + + ) + if (type === 'single') { + expect( + wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text() + ).toEqual('电视') + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + document.querySelectorAll('.hi-select__dropdown--item')[2].click() + wrapper.update() + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(false) + expect( + wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text() + ).toEqual('笔记本') + } + + if (type === 'multiple') { + expect( + wrapper + .find('.hi-select__input') + .find('.hi-select__input--item') + .map(val => val.find('.hi-select__input--item__name').text()) + ).toEqual(['手机', '电脑']) + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + document + .querySelectorAll('.hi-select__dropdown')[0] + .querySelectorAll('.hi-select__dropdown--item')[2] + .click() + wrapper.update() + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + expect( + wrapper + .find('.hi-select__input') + .find('.hi-select__input--item') + .map(val => val.find('.hi-select__input--item__name').text()) + ).toEqual(['手机', '电脑', '小米3']) + } + wrapper.unmount() + }) + }) + + it('should control by value', () => { + types.forEach(type => { + const wrapper = mount( + + ) + if (type === 'single') { + expect( + wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text() + ).toEqual('手机') + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + document.querySelectorAll('.hi-select__dropdown--item')[2].click() + expect( + wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text() + ).toEqual('手机') + wrapper.setProps({ + value: '6' + }) + expect( + wrapper.find('.hi-select__input').find('.hi-select__input--item__name').text() + ).toEqual('办公') + } + + if (type === 'multiple') { + expect( + wrapper + .find('.hi-select__input') + .find('.hi-select__input--item') + .map(val => val.find('.hi-select__input--item__name').text()) + ).toEqual(['手机', '笔记本']) + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + document + .querySelectorAll('.hi-select__dropdown')[0] + .querySelectorAll('.hi-select__dropdown--item')[2] + .click() + expect( + wrapper + .find('.hi-select__input') + .find('.hi-select__input--item') + .map(val => val.find('.hi-select__input--item__name').text()) + ).toEqual(['手机', '笔记本']) + wrapper.setProps({ + value: ['4', '5', '6'] + }) + expect( + wrapper + .find('.hi-select__input') + .find('.hi-select__input--item') + .map(val => val.find('.hi-select__input--item__name').text()) + ).toEqual(['笔记本', '生活周边', '其它']) + } + wrapper.unmount() + }) + }) + + it('should can delete one in multiple select', () => { + const wrapper = mount( + + ) + expect(wrapper.find('.hi-select__input--item')).toHaveLength(4) + wrapper.find('.hi-select__input--item__remove').at(0).simulate('click') // 删除第一个 + expect(wrapper.find('.hi-select__input--item')).toHaveLength(3) + wrapper.unmount() + }) + + it('should can delete all in multiple select', () => { + const wrapper = mount( + + ) + expect(wrapper.find('.hi-select__input--item')).toHaveLength(4) + wrapper.find('.hi-select__input').simulate('focus') + wrapper.find('.hi-select__input--icon__close').simulate('click') + expect(wrapper.find('.hi-select__input--item')).toHaveLength(0) + wrapper.unmount() + }) + + it('should can check all in multiple select', () => { + const wrapper = mount( + + ) + wrapper.find('.hi-select__input').simulate('click') + expect(wrapper.find('.hi-select__popper').prop('show')).toEqual(true) + document.querySelector('.hi-select__dropdown__searchbar--input').value = '米' + trigger(document.querySelector('.hi-select__dropdown__searchbar--input'),'input') + document.querySelectorAll('.hi-select__dropdown-check-all')[0].click() + expect(document.querySelectorAll('.hi-checkbox__input--checked')).toHaveLength(4) + wrapper.unmount() + }) + + it('should custom render dropdown list', () => { + const wrapper = mount( +0) + })} + > ++ {(dropdownShow || selectedItems.length === 0) && ( ++ {selectedItems[0] && selectedItems[0].title} ++0 + })} + > + { + this.searchInput = input + }} + value={selectedItems.length > 0 ? placeholder : ''} + placeholder={placeholder} + onChange={this.handleKeywordChange.bind(this)} + onKeyDown={this.handleKeyDown.bind(this)} + onFocus={onFocus.bind(this)} + onBlur={onBlur.bind(this)} + readOnly + /> ++ )} + + 0 } + )} + /> + {clearable && selectedItems.length > 0 && ( + + )} + + - +
-
+/// inline-block elements reset: margin, padding, text style
+/// inline elements reset: TBD.
+/// @example:
+/// .hi-btn {
+/// @include isolation('inline', 'flow-root');
+/// ...
+/// }
+@mixin isolation($display-outside: 'block', $display-inside: 'flow-root', $is-root: true) {
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
+ border: 0;
+
+ // equal to `display: inline`
+ @if not ($display-outside == 'inline' and $display-inside == 'flow') {
+ font: normal $font-weight-normal #{$font-size-normal}/#{$line-height-size-normal} $font-family-sans;
+ text-align: left;
+ text-decoration: none;
+ text-indent: 0;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: 0;
+ word-spacing: normal;
+ white-space: normal;
+ color: use-color('black');
+ }
+
+ // equal to `display: block`
+ @if ($display-outside == 'block' and $display-inside == 'flow-root') {
+ ul,
+ ol {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ }
+ }
+}
diff --git a/components/core-css/lib/_variables.scss b/components/core-css/lib/_variables.scss
new file mode 100644
index 000000000..e3e429956
--- /dev/null
+++ b/components/core-css/lib/_variables.scss
@@ -0,0 +1,100 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: define variables, alias etc.
+
+@import 'common';
+
+// Fonts
+/// Font Stack
+$_font-stack-sans: ('Helvetica Neue', Helvetica, Arial) !default;
+$_font-stack-serif: ('Times New Roman', Times) !default;
+$_font-stack-mono: ('SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier) !default;
+$_font-stack-symbol: ('Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol') !default;
+
+/// Font Family
+$font-family-sans: ($_font-stack-sans, sans-serif, $_font-stack-symbol) !default;
+$font-family-serif: ($_font-stack-serif, serif, $_font-stack-symbol) !default;
+$font-family-mono: ($_font-stack-mono, monospace, $_font-stack-symbol) !default;
+
+/// Font Weight
+$font-weight-normal: 400 !default;
+$font-weight-light: 200 !default;
+$font-weight-bold: 600 !default;
+$font-weight-black: 800 !default;
+
+/// Font Size
+$font-size-normal: 14px !default;
+$font-size-x-small: 11px !default;
+$font-size-small: 12px !default;
+$font-size-large: 16px !default;
+$font-size-x-large: 18px !default;
+$font-size-h1: 32px !default;
+$font-size-h2: 24px !default;
+$font-size-h3: 20px !default;
+$font-size-h4: 16px !default;
+$font-size-h5: 14px !default;
+$font-size-h6: 12px !default;
+
+/// Line Heights
+$line-height-size-normal: 22px !default;
+$line-height-size-x-small: 18px !default;
+$line-height-size-small: 18px !default;
+$line-height-size-large: 24px !default;
+$line-height-size-x-large: 26px !default;
+$line-height-size-h1: 40px !default;
+$line-height-size-h2: 32px !default;
+$line-height-size-h3: 28px !default;
+$line-height-size-h4: 24px !default;
+$line-height-size-h5: 22px !default;
+$line-height-size-h6: 20px !default;
+
+$line-height-normal: 1.5 !default;
+$line-height-condensed: 1.25 !default;
+$line-height-condensed-ultra: 1 !default;
+
+// Layouts
+$min-page-width: 1260px !default;
+
+// Spacer
+/// Spacer base
+$_spacer: 4px !default;
+$_spacers: (
+ $_spacer,
+ $_spacer * 2,
+ $_spacer * 3,
+ $_spacer * 4,
+ $_spacer * 5,
+ $_spacer * 6,
+ $_spacer * 7,
+ $_spacer * 8,
+ $_spacer * 9,
+ $_spacer * 10,
+) !default;
+
+/// Spacer Aliases
+$spacer-0: 0 !default; // 0
+$spacer-1: nth($_spacers, 1) !default; // 4px
+$spacer-2: nth($_spacers, 2) !default; // 8px
+$spacer-3: nth($_spacers, 3) !default; // 12px
+$spacer-4: nth($_spacers, 4) !default; // 16px
+$spacer-5: nth($_spacers, 5) !default; // 20px
+$spacer-6: nth($_spacers, 6) !default; // 24px
+$spacer-7: nth($_spacers, 7) !default; // 28px
+$spacer-8: nth($_spacers, 8) !default; // 32px
+$spacer-9: nth($_spacers, 9) !default; // 36px
+$spacer-10: nth($_spacers, 10) !default; // 40px
+
+// Colors
+/// Color shortcuts
+$black: get-color($palette-tertiary, 'black') !default;
+$gray-darker: get-color($palette-tertiary, 'gray-darker') !default;
+$gray-dark: get-color($palette-tertiary, 'gray-dark') !default;
+$gray: get-color($palette-tertiary, 'gray') !default;
+$gray-light: get-color($palette-tertiary, 'gray-light') !default;
+$gray-lighter: get-color($palette-tertiary, 'gray-lighter') !default;
+$white: get-color($palette-tertiary, 'white') !default;
+
+// Animation
+$speed-fast: 0.15s !default;
+$speed-normal: 0.3s !default;
+$speed-slow: 0.5s !default;
+$easing: ease-in !default;
diff --git a/components/core-css/lib/i18n/zh-CN.scss b/components/core-css/lib/i18n/zh-CN.scss
new file mode 100644
index 000000000..698bddd39
--- /dev/null
+++ b/components/core-css/lib/i18n/zh-CN.scss
@@ -0,0 +1,10 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: i18n config etc.
+
+@import '../variables';
+
+// 增加中文字体族
+$font-family-sans: ($_font-stack-sans, PingFang SC, PingFang TC, Hiragino Sans GB, Heiti SC, Heiti TC, Microsoft YaHei, Source Han Sans SC, Source Han Sans TC, Noto Sans CJK SC, Noto Sans CJK TC, WenQuanYi Micro Hei, sans-serif, $_font-stack-symbol);
+$font-family-black: ($_font-stack-sans, Lantinghei SC, Lantinghei TC, PingFang SC, PingFang TC, Hiragino Sans GB, Heiti SC, Heiti TC, Microsoft YaHei, Source Han Sans SC, Source Han Sans TC, Noto Sans CJK SC, Noto Sans CJK TC, sans-serif, $_font-stack-symbol);
+$font-family-serif: ($_font-stack-serif, Songti SC, Songti TC, SimSun, serif, $_font-stack-symbol);
+$font-family-mono: ($_font-stack-mono, monospace, $_font-stack-symbol);
diff --git a/components/core-css/lib/i18n/zh-CN/_font-local.scss b/components/core-css/lib/i18n/zh-CN/_font-local.scss
new file mode 100644
index 000000000..8a5813f7e
--- /dev/null
+++ b/components/core-css/lib/i18n/zh-CN/_font-local.scss
@@ -0,0 +1,129 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: define local fonts.
+
+// Sans-Serif
+/// Regular
+@font-face {
+ font-family: 'HiUI Sans';
+ src:
+ local('PingFang SC Regular'),
+ local('PingFang TC Regular'),
+ local('Hiragino Sans GB W3'),
+ local('Heiti SC Regular'),
+ local('Heiti TC Regular'),
+ local('Microsoft YaHei'),
+ local('Microsoft Jhenghei'),
+ local('Source Han Sans CN Regular'),
+ local('Source Han Sans HK Regular'),
+ local('Source Han Sans TW Regular'),
+ local('Source Han Sans JP Regular'),
+ local('Source Han Sans KR Regular'),
+ local('Noto Sans CJK SC Regular'),
+ local('Noto Sans CJK TC Regular'),
+ local('Noto Sans CJK JP Regular'),
+ local('Noto Sans CJK KR Regular'),
+ local('WenQuanYi Micro Hei'),
+ local('Droid Sans Fallback');
+}
+
+/// Light
+@font-face {
+ font-family: 'HiUI Sans';
+ font-weight: 200;
+ src:
+ local('PingFang SC Light'),
+ local('PingFang TC Light'),
+ local('Heiti SC Light'),
+ local('Heiti TC Light'),
+ local('Microsoft YaHei Light'),
+ local('Microsoft Jhenghei Light'),
+ local('Source Han Sans CN Light'),
+ local('Source Han Sans HK Light'),
+ local('Source Han Sans TW Light'),
+ local('Source Han Sans JP Light'),
+ local('Source Han Sans KR Light'),
+ local('Noto Sans CJK SC Light'),
+ local('Noto Sans CJK TC Light'),
+ local('Noto Sans CJK JP Light'),
+ local('Noto Sans CJK KR Light');
+}
+
+/// Bold
+@font-face {
+ font-family: 'HiUI Sans';
+ font-weight: 600;
+ src:
+ local('PingFang SC Medium'),
+ local('Hiragino Sans GB W6'),
+ local('PingFang TC Medium'),
+ local('Heiti SC Medium'),
+ local('Heiti TC Medium'),
+ local('Microsoft YaHei Bold'),
+ local('Microsoft Jhenghei Bold'),
+ local('Source Han Sans CN Bold'),
+ local('Source Han Sans HK Bold'),
+ local('Source Han Sans TW Bold'),
+ local('Source Han Sans JP Bold'),
+ local('Source Han Sans KR Bold'),
+ local('Noto Sans CJK SC Bold'),
+ local('Noto Sans CJK TC Bold'),
+ local('Noto Sans CJK JP Bold'),
+ local('Noto Sans CJK KR Bold');
+}
+
+// Black
+@font-face {
+ font-family: 'HiUI Black';
+ font-weight: 800;
+ src:
+ local('Lantinghei SC Heavy'),
+ local('Lantinghei TC Heavy'),
+ local('PingFang SC Semibold'),
+ local('PingFang TC Semibold'),
+ local('Hiragino Sans GB W6'),
+ local('Heiti SC Medium'),
+ local('Heiti TC Medium'),
+ local('Microsoft YaHei Bold'),
+ local('Microsoft Jhenghei Bold'),
+ local('Source Han Sans CN Heavy'),
+ local('Source Han Sans HK Heavy'),
+ local('Source Han Sans TW Heavy'),
+ local('Source Han Sans JP Heavy'),
+ local('Source Han Sans KR Heavy'),
+ local('Noto Sans CJK SC Heavy'),
+ local('Noto Sans CJK TC Heavy'),
+ local('Noto Sans CJK JP Heavy'),
+ local('Noto Sans CJK KR Heavy'),
+ local('Droid Sans Fallback');
+}
+
+// Serif
+/// Regular
+@font-face {
+ font-family: 'HiUI Serif';
+ src:
+ local('Songti SC Regular'),
+ local('Songti TC Regular'),
+ local('SimSun');
+}
+
+/// Light
+@font-face {
+ font-family: 'HiUI Serif';
+ font-weight: 200;
+ src:
+ local('Songti SC Light'),
+ local('Songti TC Light'),
+ local(STSong),
+ local('SimSun');
+}
+
+/// Bold
+@font-face {
+ font-family: 'HiUI Serif';
+ font-weight: 600;
+ src:
+ local('Songti SC Bold'),
+ local('Songti TC Bold'),
+ local('SimSun');
+}
diff --git a/components/core-css/lib/i18n/zh-CN/_font-web.scss b/components/core-css/lib/i18n/zh-CN/_font-web.scss
new file mode 100644
index 000000000..7aca62d45
--- /dev/null
+++ b/components/core-css/lib/i18n/zh-CN/_font-web.scss
@@ -0,0 +1,1603 @@
+// Author: Sivan[sunxingfan@xiaomi.com]
+// Description: define Mi Lan Pro.
+
+// stylelint-disable
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.0.woff2) format('woff2');
+ unicode-range: U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e16, U+4e1a, U+4e1c, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e48, U+4e4b, U+4e5f, U+4e86, U+4e8b-4e8c, U+4e8e, U+4e9b, U+4ea7, U+4eba, U+4ec0, U+4ece, U+4ed6, U+4ee3, U+4ee5, U+4eec, U+4efb, U+4f1a, U+4f46, U+4f4d, U+4f53, U+4f5c, U+4f60, U+4f7f, U+4fe1, U+513f, U+5148, U+5168, U+516c, U+5173, U+5176, U+5185, U+519b, U+51fa, U+5206, U+5229, U+5230, U+5236, U+524d, U+529b, U+52a0, U+52a8, U+5316, U+5341, U+539f, U+53bb, U+53c8, U+53ca, U+53d1, U+53ea, U+53ef, U+5408, U+540c, U+540e, U+5411, U+5458, U+548c, U+56de, U+56e0, U+56fd, U+5728, U+5730, U+58f0, U+5916, U+591a, U+5927, U+5929, U+5934, U+5979, U+597d, U+5982, U+5b50, U+5b66, U+5b83, U+5b9a, U+5b9e, U+5bb6, U+5bf9, U+5c06, U+5c0f, U+5c31, U+5de5, U+5df1-5df2, U+5e38, U+5e74, U+5e76, U+5e94, U+5ea6, U+5f00, U+5f53, U+5f88, U+5f97, U+5fc3, U+6027, U+60c5, U+60f3, U+610f, U+6210-6211, U+6216, U+6218, U+6240, U+624b, U+628a, U+63d0, U+653f, U+6559, U+6587, U+65af-65b0, U+65b9, U+65e0, U+65e5, U+65f6, U+660e, U+662f, U+6700, U+6708-6709, U+672c, U+673a, U+6765, U+679c, U+6837, U+6b21, U+6b63-6b64, U+6bd4, U+6c11, U+6ca1, U+6cd5, U+6d77, U+70b9, U+7136, U+7269, U+7279, U+73b0, U+7406, U+751f, U+7528, U+7531, U+7684, U+76f8, U+770b, U+7740, U+77e5, U+79cd, U+7acb, U+7b2c, U+7b49, U+7ecf, U+7ed9, U+7f8e, U+8001, U+8005, U+800c, U+80fd, U+81ea, U+884c, U+8868, U+88ab, U+897f, U+8981, U+89c1, U+8bdd, U+8bf4, U+8d77, U+8eab, U+8fc7, U+8fd8-8fd9, U+8fdb, U+901a, U+9053, U+90a3, U+90e8, U+90fd, U+91cc-91cd, U+957f, U+95e8, U+95ee, U+95f4, U+9762, U+9ad8;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.1.woff2) format('woff2');
+ unicode-range: U+4e07, U+4e14, U+4e49, U+4e66, U+4e89, U+4e94, U+4ea4, U+4eb2, U+4eca, U+4ee4, U+4ef6, U+4f20, U+4f4f, U+4f55, U+4fbf, U+4fdd, U+5019, U+505a, U+50cf, U+5143, U+5149, U+514b, U+5165, U+5171, U+5175, U+5177, U+518d, U+51b3, U+51c6, U+51e0, U+51fb, U+5207, U+5219, U+522b, U+529e, U+52a1, U+5317, U+533a, U+5355, U+5357, U+5373-5374, U+53cd, U+53d6-53d8, U+53e3, U+53eb, U+53f0, U+53f8, U+5404, U+540d, U+542c, U+544a, U+5462, U+547d, U+54c1, U+56db, U+573a, U+57fa, U+58eb, U+5904, U+5907, U+592a-592b, U+5931, U+5973, U+59cb, U+5b57-5b58, U+5b89, U+5b8c, U+5bfc, U+5c11, U+5c14, U+5c55, U+5c71, U+5e02-5e03, U+5e08, U+5e26, U+5e72-5e73, U+5efa, U+5f0f, U+5f20, U+5f3a, U+5f62, U+5f71, U+5f80, U+5fb7, U+5fc5, U+5feb, U+600e, U+601d, U+603b, U+611f, U+624d, U+6253, U+62a5, U+62c9, U+6301, U+6307, U+636e, U+63a5, U+6536, U+6539, U+653e, U+6570, U+66f4, U+670d, U+671b, U+671f, U+672a, U+672f, U+6743, U+6761, U+6781, U+6797, U+6839, U+683c, U+6b65, U+6b7b, U+6bcf, U+6c14, U+6c34, U+6c42, U+6cbb, U+6d3b, U+6d41, U+6d4e, U+6e05, U+7231, U+738b, U+7535, U+754c, U+767d, U+76ee, U+76f4, U+771f, U+773c, U+786e, U+793e, U+795e, U+79d1, U+7a0b, U+7a7a, U+7b11, U+7ba1, U+7c7b, U+7cfb, U+7ec4, U+7ed3, U+7edf, U+7f57, U+8054, U+81f3, U+8272, U+82f1, U+89c2, U+89c4, U+89c9, U+89e3, U+8a00, U+8ba1, U+8ba4, U+8ba9, U+8bae, U+8bb0, U+8bb8, U+8bba, U+8bbe, U+8bc1, U+8bc6, U+8be5, U+8c03, U+8c61, U+8d44, U+8d70, U+8def, U+8f66, U+8f6c, U+8fb9, U+8fbe, U+8fd0-8fd1, U+8fdc, U+8fde, U+9020, U+91cf, U+91d1, U+961f, U+9662, U+96be, U+975e, U+9886, U+9898, U+98ce, U+98de, U+9a6c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.2.woff2) format('woff2');
+ unicode-range: U+4e03, U+4e13, U+4e25, U+4e3e, U+4e4e, U+4e5d, U+4e9a, U+4eac, U+4ec5, U+4ef7, U+4f01, U+4f17, U+4f3c, U+4f4e, U+4f8b, U+4f9b, U+4f9d, U+503c, U+515a, U+516b, U+516d, U+5174, U+5199, U+519c, U+51b5, U+5212, U+5217, U+529f, U+52bf, U+5305, U+533b, U+5343, U+534a, U+534e, U+5386, U+53c2, U+53cb-53cc, U+53e4, U+53e6, U+53f2, U+53f7, U+5403, U+5417, U+5427, U+5468, U+54cd, U+5546, U+5668, U+56e2, U+56f4, U+56fe, U+571f, U+578b, U+57ce, U+5883, U+589e, U+590d, U+591f, U+5947, U+59d4, U+5b69, U+5b98, U+5ba2, U+5bb3, U+5bb9, U+5bc6, U+5bdf, U+5c3d, U+5c40, U+5df4, U+5e0c, U+5e7f, U+5e95, U+5e9c, U+5f15, U+5f8b, U+5fd7, U+5ff5, U+6001, U+606f, U+613f, U+623f, U+6279, U+627e, U+6280, U+6295, U+62a4, U+6309, U+63a8, U+652f, U+653b, U+6545, U+6548, U+654c, U+6574, U+6597, U+6599, U+65ad, U+65bd, U+65cf, U+65e9, U+6613, U+661f, U+663e, U+66fe, U+671d, U+6740, U+674e, U+6784, U+67d0, U+67e5, U+6807, U+6848, U+6b62, U+6b66, U+6bb5, U+6bcd, U+6c5f, U+6cb3, U+6ce8, U+6d3e, U+6d88, U+6df1, U+6ee1, U+706b, U+7167, U+7236, U+7247, U+7559, U+75c5, U+767e, U+77f3, U+7814, U+793a, U+79bb, U+79f0, U+7a76, U+7a81, U+7ad9, U+7ae0, U+7b54, U+7b97, U+7c73, U+7cbe, U+7d27, U+7ea2, U+7ea6-7ea7, U+7eaa, U+7ebf, U+7ec6-7ec8, U+7edd, U+7eed, U+7ef4, U+7fa4, U+8003, U+81f4, U+8282, U+82b1, U+82cf, U+8425, U+843d, U+867d, U+88c5, U+89c6, U+8bb2, U+8bc9, U+8bed, U+8bf7, U+8c08, U+8d23, U+8d28, U+8d39, U+8d8a, U+8db3, U+8ddf, U+8f7b, U+8f83, U+9009, U+91c7, U+9632, U+963f, U+9645, U+9648, U+9664, U+968f, U+96c6, U+9700, U+9752, U+9769, U+97f3, U+9879, U+987b, U+9996, U+9a8c, U+9ec4, U+9ed1;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.3.woff2) format('woff2');
+ unicode-range: U+4e45, U+4e50, U+4e60, U+4e70-4e71, U+4e91, U+4ecd, U+4efd, U+4f0a, U+4f18, U+4f24, U+4f59, U+4f5b, U+4fee, U+5012, U+5047, U+505c, U+5145, U+514d, U+5170, U+517b, U+51b2, U+51b7, U+5218, U+521a-521b, U+521d, U+5224, U+523b, U+526f, U+52a9, U+52b3, U+534f, U+5360-5361, U+536b, U+5370, U+538b, U+53e5, U+53f3, U+5426, U+54c8, U+54ea, U+554a, U+5584, U+559c, U+5750, U+5757, U+575a, U+591c, U+592e, U+5988, U+5a01, U+5b88, U+5b97, U+5ba1, U+5ba3-5ba4, U+5bcc, U+5c04, U+5c3c, U+5c42, U+5c45, U+5c5e, U+5c81, U+5c9b, U+5dde, U+5de6, U+5dee, U+5e1d, U+5e2e, U+5f02, U+5f39, U+5f81, U+5f85, U+5fae, U+6000, U+6015, U+6025, U+602a, U+6076, U+60a8, U+60ca, U+6258, U+6267, U+627f, U+6297, U+62c5, U+62ff, U+6325, U+6392, U+63a7, U+6562, U+65e2, U+665a, U+666e, U+6728, U+6751, U+6811, U+6821, U+68c0, U+6982, U+6a21, U+6b22, U+6bdb, U+6c49, U+6c89, U+6ce2, U+6d32, U+6e38, U+6e90, U+6f14, U+6fc0, U+7075, U+70ed, U+72af, U+72b6, U+72ec, U+7387, U+73af, U+7403, U+751a, U+7530, U+7537, U+7565, U+7591, U+75db, U+7687, U+76ae, U+76ca, U+7701, U+7834, U+798f, U+79ef, U+7a0e, U+7a7f, U+7adf, U+7b56, U+7b80, U+7d20, U+7eb3, U+7ee7, U+7f51, U+7f6a, U+7f6e, U+804c, U+80a1, U+80b2, U+80cc, U+80dc, U+8111, U+811a, U+8138, U+822a, U+822c, U+8239, U+827a, U+82e5-82e6, U+8303, U+8349, U+836f, U+83b7, U+8457, U+8840, U+8863, U+89d2, U+8b66, U+8bd5, U+8bfb, U+8c01, U+8d1f, U+8d22, U+8d85, U+8ff0, U+8ffd, U+9000-9002, U+901f, U+914d, U+9152, U+94b1, U+94c1, U+94f6, U+9519, U+9633, U+9635-9636, U+9646, U+964d, U+9650, U+9669, U+96f7, U+9759, U+987f, U+9884, U+98df, U+9999, U+9f99;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.4.woff2) format('woff2');
+ unicode-range: U+4e34, U+4e3d, U+4e61, U+4e88, U+4e92, U+4ea1, U+4ea6, U+4eae, U+4ecb, U+4ed8, U+4f26, U+4f2f, U+4fc4, U+501f, U+5065, U+51cf, U+5251, U+5267, U+52d2, U+5347, U+5356, U+535a, U+5371, U+5382, U+53bf, U+53f6, U+5409, U+541b, U+542b, U+5438, U+5440, U+5473, U+547c, U+54e5, U+5510, U+559d, U+56ed, U+56f0, U+56fa, U+5723, U+5747, U+574f, U+57df, U+5802, U+5965, U+5987, U+59d0-59d1, U+5a18, U+5a5a, U+5b59, U+5b8b, U+5b9d, U+5bab, U+5bfb, U+5c01, U+5c1a, U+5c4b, U+5cb8, U+5de8, U+5e2d, U+5e78, U+5e8f, U+5ea7, U+5ead, U+5eb7, U+5f1f, U+5f52, U+5f55, U+5fd9, U+5ffd, U+6050, U+6069, U+6162, U+6237, U+6293, U+62db, U+62e9, U+62ec, U+635f, U+6362, U+6388-6389, U+638c, U+63a2, U+6447, U+6551, U+6563, U+65c1, U+65c5, U+65e7, U+6625, U+666f, U+667a, U+6697, U+670b, U+6742, U+6750, U+675f, U+677e-677f, U+67aa, U+67b6, U+6838, U+68a6, U+695a, U+697c, U+6b27, U+6b3e, U+6bd2, U+6beb, U+6c38, U+6c99, U+6cb9, U+6cfd, U+6d0b, U+6d1b, U+6d4b, U+6e10, U+6e29, U+6e2f, U+6e56, U+6e7e, U+706d, U+70ae, U+70b8, U+70c8, U+70df, U+7248, U+7259, U+73ed, U+753b, U+7597, U+767b, U+76d1, U+775b, U+7761, U+7763, U+77ed, U+793c, U+7968, U+7981, U+79d8, U+79fb, U+7aef, U+7b14, U+7d22, U+7f16, U+7f3a, U+8033, U+80af, U+80e1, U+8131, U+8230, U+826f, U+8363, U+83ab, U+85cf, U+8651, U+8865, U+8ba8, U+8bc4, U+8bcd, U+8bd7, U+8bef, U+8bfa, U+8c0b, U+8c13, U+8c22, U+8d25, U+8d27, U+8d35, U+8d76, U+8dd1, U+8df3, U+8f7d, U+8f93, U+9003, U+9010, U+9047, U+9057, U+907f, U+91ca, U+91ce, U+949f, U+9500, U+95fb, U+9634, U+9644, U+96e8, U+9732, U+9760, U+9876, U+987a, U+987e, U+989d, U+996d, U+9c7c, U+9c81, U+9c9c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.5.woff2) format('woff2');
+ unicode-range: U+4e01, U+4e1d, U+4e30, U+4e43, U+4ebf, U+4f11, U+4f19, U+4f1f, U+4f38, U+4fb5, U+4fc3, U+5144, U+5178, U+51b0, U+51e1, U+5200, U+5211, U+523a, U+52aa, U+5348, U+5377, U+5434, U+54f2, U+552e-552f, U+5566, U+558a, U+5634, U+5706, U+5766, U+57c3, U+57f9, U+5854, U+585e, U+590f, U+593a, U+5957, U+59b9, U+59bb, U+59c6, U+59d3, U+5b81, U+5b87, U+5bbd, U+5c0a, U+5c24, U+5ddd, U+5e01, U+5e84, U+5e8a, U+5e93, U+5e97, U+5ef6, U+5f03-5f04, U+5f31, U+5f69, U+5f92, U+5fcd, U+5fd8, U+6012, U+60b2, U+620f, U+6269, U+626c, U+6298, U+62b1, U+62b5, U+62bd, U+62cd, U+62e5, U+632f, U+63aa, U+63e1, U+63f4, U+641e, U+6446, U+6469, U+64cd, U+66b4, U+66f2, U+66ff, U+672b, U+6731, U+6768, U+6770, U+6790, U+67d3, U+684c, U+6885, U+68ee, U+690d, U+6b32, U+6b4c, U+6b8a-6b8b, U+6bc1, U+6bd5, U+6c47, U+6c7d, U+6cbf, U+6d1e, U+6d6a, U+6df7, U+6f5c, U+706f, U+719f, U+7237-7238, U+725b, U+72c2, U+731b, U+732e, U+7389, U+73a9, U+74e6, U+7532-7533, U+76d6, U+76d8, U+76db, U+76df, U+7840, U+786c, U+7956, U+79c0-79c1, U+79cb, U+7a33, U+7a97, U+7ade, U+7b51, U+7bc7, U+7eaf, U+7eb7-7eb8, U+7ec3, U+7edc, U+7eff, U+7f13, U+7ffb, U+8036, U+8089, U+81e3, U+821e, U+83b1, U+8428, U+848b, U+8499, U+84dd, U+864e, U+865a, U+8857, U+8ba2, U+8bad, U+8bbf, U+8bd1, U+8bda, U+8bf8, U+8c37, U+8d1d, U+8d2d, U+8d38, U+8d5b, U+8d5e, U+8d75, U+8da3, U+8f6e-8f6f, U+8fc5, U+8fce, U+8fdd, U+8feb, U+8ff7, U+8ff9, U+900f, U+9014, U+904d, U+906d, U+90d1, U+9192, U+9488, U+9547, U+95ea, U+963b, U+9690, U+96c4-96c5, U+96ea, U+9707, U+9875, U+9986, U+9aa8, U+9b3c, U+9b54, U+9ea6, U+9ebb, U+9ed8, U+9f13, U+9f50;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.6.woff2) format('woff2');
+ unicode-range: U+4e08, U+4e39, U+4e4c, U+4e4f, U+4e58, U+4eab, U+4ec1, U+4ed9, U+4eea, U+4ef0, U+4eff, U+4f0f, U+4f30, U+4f34, U+4fa0, U+4fa7, U+4fd7, U+500d, U+503a, U+503e, U+504f, U+5076-5077, U+507f, U+5192, U+51ac, U+51c0, U+51f6, U+520a, U+52b2, U+52c7, U+5385, U+5389, U+539a, U+53ec, U+53f9, U+542f, U+5439, U+5446, U+54b1, U+54ed, U+5531, U+5708, U+5806, U+5899, U+58c1, U+5949, U+594b, U+5954, U+5956, U+5976, U+5999, U+5a46, U+5b54, U+5b63-5b64, U+5b9c, U+5bd2, U+5c16, U+5c3e, U+5de7, U+5e55, U+5e86, U+5e9f, U+5f17, U+5f79, U+5f7b-5f7c, U+5f84, U+5f90, U+5fa1, U+5fc6, U+5fe0, U+6062, U+6068, U+6070, U+60a3, U+60ef, U+6108, U+61c2, U+6234, U+62ac, U+62d2, U+62dc, U+6302, U+6311, U+6355, U+63cf, U+6478, U+64a4, U+64ad, U+656c, U+65cb, U+65e6, U+6620, U+6653, U+6668, U+6682, U+66fc, U+6717, U+675c, U+676f, U+6865, U+6a2a, U+6cdb, U+6cea, U+6cf0, U+6d17, U+6d25, U+6d2a, U+6d89, U+6da6, U+6de1, U+6f6e, U+7070, U+707e, U+708e, U+70e6-70e7, U+7206, U+724c, U+72b9, U+72d7, U+739b, U+73cd, U+73e0, U+745e, U+75be, U+75c7, U+76fe, U+77ff, U+7801, U+78b0, U+79df, U+79e6, U+7a0d, U+7a77, U+7ae5, U+7b26, U+7b7e, U+7cae, U+7cca, U+7d2f, U+7e41, U+7eb5, U+7ecd, U+7f18, U+7f29, U+7f5a, U+7f62, U+7f72, U+7f8a, U+7ffc, U+805a, U+80c6, U+80de, U+80f8, U+817f, U+820d, U+8247, U+827e, U+8336, U+8352, U+83dc, U+866b, U+86cb, U+878d, U+8861, U+888b, U+88ad, U+88c1-88c2, U+89e6, U+8baf, U+8bfe, U+8d2b, U+8d56, U+8d6b, U+8ddd, U+8f70, U+8f86, U+8f91, U+8fa9, U+8fdf, U+90a6, U+955c, U+95ed, U+95f9, U+9677, U+9686, U+9694, U+969c, U+96f6, U+97e9, U+9a7b, U+9a91, U+9b42, U+9e1f, U+9e21, U+9f3b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.7.woff2) format('woff2');
+ unicode-range: U+4e27, U+4e54, U+4e95, U+4ec7, U+4ed4, U+4f0d, U+4f2a, U+4f69, U+4f73, U+4fa6, U+4fe9, U+50a8, U+5141, U+517c, U+518c, U+51c9, U+51e4, U+51ed, U+51ef, U+5238, U+5242, U+5269, U+529d, U+52b1, U+52c3, U+52e4, U+53d4, U+5413, U+5448, U+5761, U+5782, U+5821, U+58a8, U+58ee, U+594f, U+5974, U+5a1c, U+5a92, U+5b5f, U+5b99, U+5baa, U+5bbe, U+5c38, U+5c3a, U+5c4a, U+5ca9, U+5cf0, U+5d07, U+5de1, U+5e15, U+5e45, U+5e7b-5e7c, U+5f6d, U+5fe7, U+601c, U+604b, U+6084, U+6089, U+60d1, U+60dc, U+60e0, U+60e8, U+6124, U+6148, U+6167, U+6212, U+622a, U+624e, U+6251, U+626b, U+6270, U+62a2, U+62d4, U+62d6, U+62df, U+633a, U+63a9, U+63d2, U+641c, U+6444, U+6492, U+649e, U+654f, U+65d7, U+660f, U+6628, U+66f9, U+6735, U+679d, U+67cf, U+67d4, U+67f3, U+6851, U+6881, U+6b23, U+6b96, U+6bbf, U+6c0f, U+6c57, U+6c61, U+6ce5, U+6d01, U+6d53, U+6d6e, U+6db2, U+6e21, U+6ed1, U+6eda, U+6f02, U+6f2b, U+7126, U+71c3, U+722c, U+7267, U+7272, U+72f1, U+731c, U+7518, U+756a, U+75af, U+7686, U+7709, U+77a7, U+77db, U+788d-788e, U+78e8, U+7a3f, U+7af9, U+7bad, U+7bb1, U+7c4d, U+7c89, U+7c97, U+7ed5, U+7ee9-7eea, U+7efc, U+8010, U+8083, U+80a9, U+80c1, U+8109, U+814a, U+8150, U+8170, U+8179, U+8212, U+8258, U+82b3, U+8361, U+8377, U+83f2, U+8482, U+8584, U+8bca, U+8be6, U+8c6a, U+8c8c, U+8d21, U+8d2f, U+8d34, U+8d4f, U+8d8b, U+8dc3, U+8dcc, U+8df5, U+8e2a, U+8f88, U+8f9b, U+8f9e, U+8fd4, U+8fea, U+9012, U+903b-903c, U+9075, U+90aa, U+90ce, U+9178, U+9501, U+952e, U+95f2, U+9605, U+970d, U+9887, U+9891, U+9897, U+989c, U+98d8, U+9910, U+996e, U+9a71, U+9a76, U+9a7e, U+9a82, U+9a97, U+9ece, U+9f84;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.8.woff2) format('woff2');
+ unicode-range: U+4e1b, U+4e22, U+4e8f, U+4ed7, U+4ef2, U+4faf, U+5179, U+517d, U+51a0, U+51af, U+51cc, U+51dd, U+524a, U+5272, U+5306, U+5362, U+538c, U+53d9, U+53db, U+5410, U+5415, U+541e, U+5428, U+543e, U+54ac, U+54c0, U+55b7, U+561b, U+57cb, U+5939, U+5948, U+5b8f, U+5bbf, U+5bc2, U+5bc4, U+5bff, U+5c18, U+5c1d, U+5c48, U+5c82, U+5c97, U+5ce1, U+5e10, U+5e3d, U+5e7d, U+5ef7, U+5f25, U+5f2f, U+5faa, U+6016, U+6028, U+6052, U+606d, U+607c, U+609f, U+60e7, U+614c, U+614e, U+6170, U+6208, U+6241, U+6263, U+6276, U+6291, U+6296, U+629a-629b, U+62bc, U+62f3, U+6324, U+6377, U+63ed, U+642c, U+64e6, U+6566, U+6572, U+659c, U+65e8, U+6606, U+660c, U+6643, U+664b, U+6676, U+6696, U+66f0, U+67f1, U+6863, U+68af-68b0, U+6905, U+6b3a, U+6c60, U+6c64, U+6c88, U+6c9f, U+6cc9, U+6d45, U+6d82, U+6d8c, U+6e14, U+6e7f, U+6f20, U+6fb3, U+70bc, U+70c2, U+7164, U+718a, U+71d5, U+7262, U+7275, U+72e0, U+72fc, U+730e, U+732a-732b, U+7384, U+73bb, U+7434, U+745f, U+74f6, U+75ab, U+75b2, U+75bc, U+764c, U+76d7, U+78c1, U+795d, U+7965, U+796d, U+79e9, U+7a00, U+7a46, U+7b79, U+7c92, U+7cb9, U+7cd6, U+7d2b, U+7ea0, U+7eb9, U+7ebd, U+8017, U+806a, U+809a, U+809d, U+80a4-80a5, U+80bf, U+810f, U+817e, U+81c2, U+8270, U+82cd, U+83cc, U+8463, U+86c7, U+8870, U+8881, U+8896, U+8a89, U+8be2, U+8bf1, U+8c46, U+8d37, U+8d3a, U+8d4b, U+8d54, U+8d64, U+8de8, U+8e0f, U+8eb2, U+8eba, U+8f89, U+8f96, U+8fc1, U+8fc8, U+900a, U+9063, U+9065, U+9093, U+90ae, U+90bb, U+9189, U+9274, U+94a2, U+94bb, U+94dc, U+94fa, U+950b, U+9601, U+9614, U+966a, U+9676, U+96fe, U+978b, U+97e6, U+9970, U+9b4f, U+9e23, U+9f20, U+9f7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.9.woff2) format('woff2');
+ unicode-range: U+4e11, U+4e18, U+4e32, U+4e59, U+4e73, U+4e7e, U+4ec6, U+4ed3, U+4f10, U+4f8d, U+4fca, U+4ff1, U+5085, U+50b2, U+50bb, U+51fd, U+5237, U+5265, U+52a3, U+52ab, U+5339, U+5353, U+535c, U+5367, U+543b, U+5475, U+54e6, U+54e9, U+54fc, U+5507, U+5524, U+5582, U+5598, U+5609, U+5740, U+575b, U+582a, U+586b, U+5893, U+58f3, U+5938, U+5951, U+5978, U+5996, U+59a5, U+59a8, U+59ff, U+5a03, U+5acc, U+5b85, U+5bf8, U+5bfa, U+5c3f, U+5c4f, U+5c65, U+5cb3, U+5e05, U+5e99, U+5e9e, U+5ec9, U+5fcc, U+6094, U+60a6, U+60ac, U+60df, U+60e9, U+6109, U+611a, U+6155, U+6247, U+6254, U+626d-626e, U+62e6, U+62e8, U+62fc, U+62fe, U+6316, U+6321, U+6323, U+6349, U+63a0, U+642d, U+643a, U+65a4-65a5, U+6602, U+6674, U+679a, U+67dc, U+67ef, U+67f4, U+6842-6843, U+68c9, U+6b20, U+6b47, U+6b7c, U+6bc5, U+6c27, U+6c6a, U+6c83, U+6ce1, U+6d51, U+6d69, U+6da8, U+6dfb, U+6e34, U+6e83, U+6e9c, U+6ecb, U+6ef4, U+7089, U+7235, U+727a, U+73b2, U+7483, U+74dc, U+758f, U+75d5, U+7626, U+76b1, U+76d0, U+76ef, U+7720, U+7741, U+7897, U+7978, U+7a74, U+7a9d, U+7aed, U+7b3c, U+7cdf, U+7eb2, U+7ed8, U+7ef3, U+7f1d, U+7f34, U+7f69, U+7fbd, U+7ff0, U+8000, U+8015, U+804a, U+808c, U+80a0, U+80c3, U+80ce, U+80d6, U+8106, U+8154, U+8180, U+819c, U+820c, U+8231, U+82ac, U+82d7, U+8328, U+832b, U+8389, U+83b2, U+8427, U+845b, U+84c4, U+859b, U+8702, U+8986, U+89c8, U+8bbc, U+8bde, U+8c28, U+8c6b, U+8d24, U+8d2a, U+8d62, U+8d74, U+8f68, U+8fa8, U+8fb1, U+9006, U+9080, U+90c1, U+90ed, U+9177, U+94c3, U+9510, U+9526, U+95f7, U+9675, U+96b6, U+96c7, U+96d5, U+9738, U+98a4, U+9971-9972, U+997f, U+9e3f, U+9e4f, U+9e70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.10.woff2) format('woff2');
+ unicode-range: U+4ea8, U+4ead, U+4ed1, U+4f50, U+4fd8, U+5018, U+5021, U+50ac, U+50e7, U+5112, U+5188, U+51bb, U+51d1, U+52c9, U+52fe, U+5320, U+5351, U+5375, U+537f, U+53a8, U+5401, U+540a, U+541f, U+5435, U+543c, U+5490, U+54bd, U+5509, U+5565, U+5589, U+55ef, U+5631, U+56ca, U+5733, U+5851, U+5915, U+5984, U+59ae, U+59fb, U+5a07, U+5a74, U+5ac1-5ac2, U+5b55, U+5b5d, U+5bb0, U+5bb4, U+5bd3, U+5c09, U+5c60, U+5d29, U+5deb, U+5eb8, U+5eca, U+5f8c, U+6014, U+60a0, U+6101, U+626f, U+62ab, U+62b9, U+62c6, U+62d8, U+6328, U+644a, U+6458, U+6467, U+6491, U+6591, U+65bc, U+65fa, U+662d, U+6734, U+6746, U+67af, U+680f, U+6846, U+68cb, U+68f5, U+6b49, U+6b67, U+6c1b, U+6cc4, U+6cca, U+6d59, U+6d66, U+6d9b, U+6dcb, U+6e0a, U+6eaa, U+6ee9, U+6f0f, U+6f58, U+704c, U+7239, U+72ed, U+7329, U+7334, U+7391, U+7487, U+751c, U+752b, U+7545, U+754f, U+755c, U+7586, U+7624, U+76c6, U+76c8, U+76d2, U+76f2, U+76fc, U+77aa, U+77ac, U+77e3, U+77e9, U+77ee, U+78a7, U+7985, U+79a7, U+79d2, U+7a83, U+7b52, U+7ea4, U+7ef5, U+7f20, U+7f9e, U+7fc1, U+7fc5, U+7fd4, U+7fe0, U+8038, U+803b, U+8096, U+80ba, U+80c0, U+80f6, U+8116, U+81ed, U+8273, U+829d, U+838e, U+840d, U+8461, U+846c, U+853d, U+85aa, U+85e4, U+8679, U+86ee, U+871c, U+8822, U+886b, U+8877, U+88d5, U+88e4, U+88f8, U+8a93, U+8bb6, U+8c05, U+8c0a, U+8c2d, U+8d26, U+8d3c, U+8d3e, U+8d4c, U+8d50, U+8d5a, U+8d60, U+8d81, U+8dea, U+8f85, U+8f9f, U+8fbd, U+901d, U+9022, U+9042, U+906e, U+916c, U+94a6, U+94ed, U+94fe, U+9505, U+9521, U+95ef, U+9610, U+9640, U+9655, U+971e, U+987d, U+9888, U+98a0, U+9965, U+9a70, U+9a73, U+9aa4, U+9c8d, U+9e2d, U+9e45, U+9e7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.11.woff2) format('woff2');
+ unicode-range: U+4ea9, U+4f1e, U+4fa8, U+4fef, U+5026, U+50da, U+50f5, U+5146, U+5154, U+51a4, U+51c4, U+522e, U+5239, U+526a, U+52cb, U+532a, U+5398, U+53a6, U+53c9, U+53e0, U+540f, U+5429, U+5492, U+5496, U+54b3, U+54ce, U+54d1, U+54e8, U+5561, U+5578, U+5583, U+55bb, U+5632, U+5662, U+56b7, U+5751, U+575f-5760, U+5784, U+5835, U+5937, U+59ca, U+59da, U+59dc, U+59e8, U+5a9a, U+5ab3, U+5be1, U+5be8, U+5c41, U+5cad, U+5d16, U+5de2, U+5de9, U+5df7, U+5dfe, U+5f0a, U+5f13, U+5f26, U+5fbd, U+6055, U+6073, U+60f6, U+60f9, U+6123, U+6127, U+6168, U+61be, U+61d2, U+621a, U+6284, U+62d0, U+62d3, U+62e2, U+632a, U+633d, U+6350, U+6367, U+638f, U+6398, U+6401, U+640f, U+6454, U+6495, U+64b0, U+64c5, U+65ec, U+6614, U+6627, U+6655, U+6670, U+676d, U+67c4, U+68cd, U+68d2, U+6b6a, U+6bb7, U+6cfc, U+6d12, U+6d74, U+6d78, U+6d85, U+6db5, U+6deb, U+6dee, U+6e20, U+6e58, U+6eb6, U+6ede, U+6ee5, U+6f06, U+70ad, U+7130, U+714c, U+715e, U+722a, U+723d, U+72c4, U+72d0, U+72ee, U+733f, U+73ab, U+7433, U+743c, U+74f7, U+75f4, U+7728, U+778e, U+780d, U+7816, U+7855, U+7891, U+7984, U+7a23, U+7a84, U+7a91, U+7b28, U+7b4b, U+7bee, U+7c98, U+7ee2, U+7f55, U+800d, U+8058, U+80a2, U+80be, U+8102, U+810a, U+813e, U+817a, U+819d, U+8205-8206, U+821f, U+8236, U+8292, U+8302, U+8305, U+8350, U+83e9, U+8404, U+84b2, U+84b8, U+84ec, U+8521, U+8776, U+87ba, U+8854, U+888d, U+88f9, U+8bbd, U+8c0d-8c0e, U+8c26, U+8c2c, U+8c31, U+8d1e, U+8eaf, U+8f69, U+8fb0, U+902e, U+9038, U+90ca, U+90e1, U+9489, U+9493, U+94a9, U+964c, U+9661, U+96c0, U+96cc, U+97ad, U+9881, U+9976, U+997c, U+9a84, U+9a9a, U+9e26, U+9f0e, U+9f9f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.12.woff2) format('woff2');
+ unicode-range: U+4e38, U+4e56, U+4e5e, U+4f3d, U+4f63, U+5029, U+508d, U+5151, U+515c, U+5180, U+51f0, U+5256, U+5288, U+52d8, U+52ff, U+5308, U+5319, U+5352, U+5378, U+5384, U+53a2, U+545c, U+5495, U+54a8, U+54b8, U+54c4, U+54c7, U+54d7, U+54df, U+5580, U+55d3, U+563b, U+563f, U+56da, U+574a, U+574e, U+5792, U+57ab, U+5824, U+584c, U+5858, U+58e4, U+58f6, U+5983, U+5992, U+5a1f, U+5a31, U+5a36, U+5ae9, U+5b9b, U+5ba0, U+5bc7, U+5c51, U+5c61, U+5cfb, U+5d14, U+5e06, U+5e18, U+5e62, U+5f66, U+5f6a, U+6021, U+602f, U+604d, U+62f1, U+632b, U+634f, U+635e, U+6380, U+6500, U+655e, U+658b-658c, U+65a9, U+65f1, U+673d, U+6756, U+6816-6817, U+682a, U+683d, U+6853, U+6869, U+6876, U+68da, U+68e0, U+690e, U+699c, U+6bd9, U+6c41, U+6c5d, U+6cab, U+6cbc, U+6cbe, U+6ce3, U+6dd8, U+6df9, U+6e17, U+6ea2, U+6ee8, U+707f, U+7092, U+70db, U+7109, U+711a, U+716e, U+7199, U+73ca, U+7470, U+7538, U+7779, U+7784, U+7792, U+7838, U+788c, U+7948, U+7977, U+79bd, U+79c3, U+7a3b, U+7a3d, U+7a9c, U+7ad6, U+7b1b, U+7bf7, U+7cd5, U+7eb1, U+7eba, U+7ec5, U+7ed1, U+7ee3, U+7f1a, U+7f50, U+8086, U+80f3, U+8155, U+818a, U+81a8, U+82a6, U+82af, U+82f9, U+8346, U+83ca, U+8511, U+864f, U+8681, U+8721, U+884d, U+886c, U+88d9, U+8a79, U+8b6c, U+8bc8, U+8be1, U+8bf5, U+8c10, U+8c15, U+8c1c, U+8c23, U+8c34, U+8c79, U+8d29, U+8d2c, U+8d31, U+8d3f, U+8d9f, U+8e22, U+8e29, U+8e72, U+8e81, U+8f74, U+8f7f, U+8f90, U+8f9c, U+8fa3, U+8fc4, U+8fe6, U+9017, U+90b1, U+9119, U+9187, U+94a5, U+94a7, U+94f8, U+953b, U+9551, U+960e, U+9699, U+96c1, U+9706, U+9709, U+9756, U+97f5, U+9882, U+9896, U+99a8, U+9a74, U+9a87, U+9b41, U+9b44;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.13.woff2) format('woff2');
+ unicode-range: U+4e10, U+4e19, U+4e2b, U+4f3a, U+4f51, U+4f84, U+4fa3, U+4fae, U+4ffa, U+500f, U+501a, U+516e, U+51a5, U+51b6, U+51f3, U+51ff, U+5203, U+5220, U+527f, U+52df, U+5300, U+53a5, U+53ed-53ee, U+54a7, U+54af, U+54c9, U+5587, U+55a7, U+55c5, U+55e1, U+55e3, U+5636, U+566a, U+56bc, U+573e, U+575d, U+576a, U+5783, U+57ae, U+5815, U+594e, U+5960, U+5962, U+5986, U+5993, U+59ec, U+5a25, U+5a49, U+5ac9, U+5bde, U+5c2c, U+5c34, U+5c7f, U+5c9a, U+5d0e, U+5e87, U+5f18, U+5f6c, U+60d5, U+6115, U+618e, U+61c8, U+62c2, U+62d9, U+62ef, U+6320, U+6346, U+6361, U+6363, U+63b7, U+6402, U+6405, U+6577, U+65a7, U+65f7, U+663c, U+6652, U+6664, U+6687, U+6691, U+66ae, U+6749, U+674f, U+6795, U+67a2, U+680b, U+6850, U+68a2, U+68ad, U+68b3, U+68d5, U+68fa, U+69b4, U+6a31, U+6bef, U+6c22, U+6c79, U+6ca6, U+6caa, U+6cb8, U+6ccc, U+6cf3, U+6cfb, U+6d46, U+6da1, U+6daf, U+6dd1, U+6eaf, U+6ed4, U+6f6d, U+6f84, U+6f9c, U+6fa1, U+7076, U+70c1, U+70e4, U+7115, U+71ac, U+71e5, U+72ac, U+72e1, U+72f8, U+7529, U+7574, U+75d2, U+7785, U+77a5, U+7802, U+786b, U+78b3, U+7a1a, U+7a3c, U+7aa5, U+7eac, U+7ed2, U+7ede, U+7ee5, U+7ef8, U+7f05, U+7f14, U+7fa1, U+803d, U+803f, U+8042, U+8165, U+818f, U+8299, U+82bd, U+830e, U+8335, U+836b, U+83b9, U+83bd, U+840e, U+841d, U+84c9, U+852c, U+8574, U+85c9, U+85e9, U+85fb, U+8650, U+8680, U+8695, U+86db, U+8700, U+8747, U+8859, U+8910, U+8bcf, U+8be7, U+8beb, U+8e44, U+8e48, U+8eac, U+901b, U+903e, U+904f, U+917f, U+949e, U+94ae, U+94c5, U+9556, U+9600, U+964b, U+965b, U+971c, U+9877, U+988a, U+9a7c, U+9ab8, U+9b45, U+9cb8, U+9cde, U+9e3d, U+9e64, U+9e9f, U+9ebd, U+9edb;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.14.woff2) format('woff2');
+ unicode-range: U+4e4d, U+4f36, U+4fcf, U+4fed, U+50fb, U+5140, U+51a2, U+51f8-51f9, U+533f, U+5395, U+53e8-53e9, U+5431, U+5450, U+5455, U+547b, U+548b, U+549a, U+54ee, U+54fa, U+5564, U+556a, U+557c, U+5594, U+55dc, U+55fd, U+560e, U+5618, U+561f, U+56a3, U+5764, U+57a3, U+5885, U+589f, U+59e5, U+5a05, U+5a76, U+5b7d, U+5ba6, U+5bdd, U+5c39, U+5c6f, U+5ced, U+5d4c, U+5e16, U+5e1c, U+5e90, U+5ed3, U+5ed6, U+5f70, U+5fd6, U+60af, U+60bc, U+60ed, U+6151, U+6177, U+61ff, U+6233, U+625b, U+627c, U+62da, U+62e3, U+631f, U+63c9, U+63fd, U+6487, U+64bc, U+64d2, U+655b, U+6590, U+65ed, U+664c, U+6726, U+6789, U+67a3, U+6805, U+6813, U+6868, U+6897, U+68d8, U+68f1, U+69fd, U+6a61, U+6b79, U+6bcb, U+6bd3, U+6c70, U+6cae, U+6d47, U+6d4a, U+6d4f, U+6da9, U+6dcc, U+6e3a, U+6e85, U+707c, U+7095, U+70af, U+70eb, U+714e, U+7184, U+718f, U+725f, U+73c0, U+7409, U+7410, U+7422, U+745b-745c, U+7476, U+74e3, U+7554, U+762b, U+766b, U+76cf, U+7729, U+772f, U+7737, U+77bb, U+77e2, U+77eb, U+7830, U+789f, U+78b1, U+78c5, U+78d5, U+78f7, U+7901, U+7980, U+79b9, U+79c9, U+7a98, U+7a9f, U+7aa6, U+7aff, U+7c07, U+7c3f, U+7c9f, U+7caa, U+7ef0, U+7ef7, U+7f06, U+7f15, U+7f38, U+7fd8, U+804b, U+80da, U+80e7, U+817b, U+819b, U+82d1, U+82df, U+83ba, U+83f1, U+840c, U+8471, U+8513, U+8654, U+865e, U+867e, U+8682, U+868a, U+86d9, U+8774, U+88d4, U+88d8, U+88f3, U+8944, U+895f, U+89c5, U+8ba5, U+8bb3, U+8bc0, U+8c41, U+8d2e, U+8d4e, U+8db4, U+8dcb, U+8e66, U+8f7c, U+8fc2, U+90b5, U+9102, U+914c, U+91c9, U+9499, U+9524, U+9576, U+968b, U+96ef, U+9885, U+9890, U+9893, U+9988, U+9a6f, U+9a86, U+9ad3, U+9ccd, U+9eef;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.15.woff2) format('woff2');
+ unicode-range: U+4ea5, U+4ed5, U+4f5f, U+4f88, U+5162, U+5189, U+51db, U+5254, U+5323, U+5366, U+53ae, U+53f1, U+53fd, U+542d, U+5443, U+5499, U+54a6, U+552c, U+553e, U+55e6, U+565c, U+575e, U+57a6, U+57d4, U+58d5, U+592d, U+5955, U+599e, U+5a62, U+5a6a, U+5a7f, U+5ae6, U+5b5c, U+5bb5, U+5be5, U+5c49, U+5c94, U+5cd9, U+5ce8, U+5d1b, U+5d2d, U+5e9a, U+5eb5-5eb6, U+5f27, U+5f8a, U+5f98, U+5fcf, U+5fd2, U+5fff, U+6020, U+608d, U+6096, U+60eb, U+618b, U+61e6, U+6252, U+6273, U+6292, U+62c7, U+62e7, U+62f4, U+631a, U+6342, U+63e3, U+63ea, U+6413, U+6479, U+64ce, U+659f, U+6666, U+6714-6715, U+6760, U+67ec, U+6808, U+68a8, U+6912, U+69bb, U+69d0, U+6a71, U+6a90, U+6b86, U+6c13, U+6c28, U+6c2f, U+6c40, U+6c81, U+6c9b, U+6ca7, U+6d3d, U+6d95, U+6dc0, U+6df3, U+6e23, U+6e5b, U+6fd2, U+7011, U+717d, U+7194, U+7261, U+7281, U+72c8, U+72e9, U+733e, U+742a, U+745a, U+7578, U+75a4, U+75ae, U+75ea, U+75f0, U+7682, U+7693, U+76d4, U+7736, U+7766, U+77d7, U+785d, U+7940, U+79ba, U+79fd, U+7a8d, U+7b77, U+7bf1, U+7ca4-7ca5, U+7cd9, U+7d0a, U+7d6e, U+7eca, U+7ece, U+7efd, U+7f00, U+7f09, U+7f0e, U+8098, U+80aa, U+80ae, U+812f, U+816e, U+81c0, U+821c, U+8235, U+8237, U+82ad, U+82b8, U+82d4, U+82db, U+8304, U+831c, U+84e6, U+851a, U+8549, U+8587, U+8718, U+8749, U+87f9, U+8845, U+889c, U+88f4, U+8902, U+8bc5, U+8bec, U+8c0f, U+8c1f, U+8d41, U+8d66, U+8dbe, U+8e31, U+8fed, U+901e, U+9091, U+90b8-90b9, U+90dd, U+9171, U+9176, U+918b, U+949d, U+94c0, U+94ee, U+94f2, U+9523, U+9525, U+952f, U+9698, U+9704, U+9716, U+9761, U+9774, U+978d, U+9798, U+97a0, U+97e7, U+9975, U+9977, U+9ae6, U+9e43, U+9f9a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.16.woff2) format('woff2');
+ unicode-range: U+4e1e, U+4ea2, U+4f0e, U+4f22, U+4f43, U+4f6c, U+4f6f, U+4f83, U+4fa5, U+4fac, U+4fde, U+502a, U+502d, U+5243, U+52fa, U+5315, U+5321, U+5349, U+5484, U+5486, U+548e, U+54aa, U+54c6, U+5514, U+5520, U+5543, U+55b3, U+55bd, U+55e4, U+55e8, U+5600, U+566c, U+568e, U+57a2, U+595a, U+59be, U+5a34, U+5b09, U+5b75, U+5c27, U+5c4e, U+5dcd, U+5df3, U+5e4c, U+5eff, U+5f1b, U+5fe1, U+5ff1, U+6043, U+6064, U+60da, U+60f0, U+60fa, U+61ca, U+620e, U+622e, U+62a8, U+62ce, U+62ed, U+62f7, U+62fd, U+631b, U+6345, U+634d, U+63ba, U+6400, U+655d, U+66d9, U+66f3, U+672d, U+67ab, U+67ff, U+6854, U+68a7, U+68b5, U+692d, U+695e, U+6986, U+69db, U+6a0a, U+6a35, U+6b89, U+6bb4, U+6c72, U+6c8c, U+6d3c, U+6da4, U+6dc6, U+6e0e, U+6eba, U+6ee4, U+6f47, U+6f88, U+708a, U+70ab, U+70b3, U+70bd, U+70d8, U+7118, U+72d2, U+7316, U+731d, U+741b, U+7426, U+748b, U+752d, U+759a, U+75a1, U+75b9, U+75f9, U+761f, U+763e, U+7696, U+7738, U+773a, U+776c, U+77a9, U+77bf, U+77f6, U+780c, U+7845, U+78cb, U+7960, U+7a20, U+7a57, U+7a92, U+7a96, U+7b03, U+7b20, U+7b5b, U+7c27, U+7eeb, U+7f2a, U+7f81, U+7fe9, U+8087, U+808b, U+809b, U+80f0, U+8113, U+81b3, U+81fb, U+8214, U+829c, U+82c7, U+8338, U+8367, U+83c1, U+83c7, U+846b, U+854a, U+857e, U+85af, U+86fe, U+8757, U+8760, U+88b1, U+892a, U+8bdb, U+8c12, U+8c1b, U+8c24, U+8c5a, U+8d42-8d43, U+8d63, U+8dc4, U+8e09, U+8e0c, U+8e6c, U+8e87, U+8f67, U+8f99, U+8fab, U+8ff8, U+9041, U+90a2, U+915d, U+948a, U+94b3, U+94dd, U+9508, U+9555, U+95f8, U+95fa, U+95fd, U+962e, U+9631, U+9647, U+9668, U+9685, U+96a7, U+96cd, U+970e, U+9776, U+988c, U+9a8f, U+9aa1, U+9ca4, U+9e25;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.17.woff2) format('woff2');
+ unicode-range: U+4e52-4e53, U+4eb5, U+4fd0, U+4fe8, U+4ffe, U+5014, U+5195, U+524c, U+52be, U+533e, U+5406, U+541d, U+5420, U+545b, U+5471, U+5480, U+548f, U+54dd, U+5544, U+55d2, U+55d4, U+5608, U+5657, U+5669, U+5693, U+56f1, U+5703, U+572d, U+574d, U+57e0, U+5811, U+5830, U+58a9, U+5944, U+598a, U+5a20, U+5a3c, U+5ad6, U+5ae3, U+5b5a, U+5b70, U+5bc5, U+5c91, U+5d69, U+5e27, U+5e37, U+5e54, U+5e61, U+5f29, U+5f57, U+5f5d, U+5f77, U+5f99, U+6005, U+606a, U+607a, U+609a, U+60b4, U+60b8, U+60cb, U+60d8, U+612b, U+6194, U+6289, U+62cc, U+6376, U+637b, U+6390, U+63a3, U+63b3, U+63cd, U+63d6, U+6414, U+64a9, U+64ae, U+6512, U+6518, U+6538, U+6555-6556, U+6656, U+66a8, U+66dd, U+6845, U+6977, U+6a44, U+6a59, U+6a80, U+6b83, U+6bd7, U+6be1, U+6c2e, U+6c90, U+6ca5, U+6cbd, U+6de4, U+6e89, U+6ec7, U+6f13, U+6f31, U+6f8e, U+70ac, U+70d9, U+70f9, U+7280, U+72de, U+7405, U+7459, U+74a7, U+7599, U+75c9, U+7629, U+76ce, U+776b, U+777e-777f, U+783e, U+78ca, U+78fa, U+7941, U+795f, U+797a, U+79be, U+79e7, U+7a79, U+7afa, U+7b0b, U+7b50, U+7b5d, U+7be1, U+7c38, U+7c7d, U+7cb1, U+7e82, U+7eb6, U+7eee, U+7f8c, U+7fce, U+807f, U+80b4, U+80fa, U+814b, U+8151, U+8153, U+8339, U+8403, U+8424, U+8475, U+849c, U+853c, U+8611, U+86df, U+8782, U+8815, U+8884-8885, U+8892, U+8912, U+8925, U+89d1, U+8bd8, U+8be3, U+8bf2, U+8bfd, U+8d3b, U+8d58, U+8f84, U+8f97, U+900d, U+914b, U+9163, U+9165, U+9175, U+94a0, U+94b5, U+94e2, U+9504, U+950c, U+951a, U+9619, U+961c, U+962a, U+96cf, U+96f3, U+9739, U+9785, U+97f6, U+987c, U+9889, U+9a6d-9a6e, U+9abc, U+9ccc, U+9e20, U+9e4a, U+9e66, U+9e93, U+9edd, U+9f8b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.18.woff2) format('woff2');
+ unicode-range: U+4e15, U+4e9f, U+4f8f, U+4fdf, U+504e, U+5055, U+50a9, U+5197, U+51cb, U+5201, U+5228, U+532e, U+5364, U+53fc, U+542e, U+5494, U+54d2, U+54e7, U+54fd, U+5506, U+5527, U+5567, U+558b, U+55d6, U+5676, U+576f, U+5942, U+5a77, U+5ae1, U+5ce6, U+5d3d, U+5d4b, U+5dc5, U+5e1a-5e1b, U+5f3c, U+6002, U+6026, U+6059, U+606c, U+60bb, U+60e6, U+60ee, U+60f4, U+61a7-61a8, U+61ac, U+620a, U+620d, U+621f, U+62bf, U+62c8, U+62d7, U+631d, U+634e, U+63e9, U+6410, U+6452, U+64ac, U+64b5, U+64c2, U+652b, U+66e6, U+67b7, U+6829, U+6862, U+6893, U+6960, U+6984, U+69a8, U+6a58, U+6c16, U+6c1f, U+6c5b, U+6c5e, U+6c76, U+6c7e, U+6c82, U+6cf5, U+6d52, U+6d5a, U+6d8e, U+6dc4, U+6e0d, U+6e1d, U+6e24, U+6e2d, U+6e32, U+6e44, U+6f09, U+6f29-6f2a, U+6f3e, U+6f66, U+701a, U+7099, U+70ec, U+72d9, U+73ba, U+73c2, U+73d1, U+7435-7436, U+747e, U+74e2, U+75a3, U+75ca, U+75d4, U+7622, U+7656, U+7688, U+76bf, U+779f, U+77b3, U+77dc, U+7889, U+7898, U+78be, U+78d0, U+79e4, U+7ae3, U+7b06, U+7b08, U+7b3a, U+7b4f, U+7b8d, U+7bab, U+7cdc, U+7eda, U+7f24, U+7f2d, U+7f94, U+7fcc, U+8006, U+8046, U+80e5, U+81ba, U+81c6, U+82b9, U+82de, U+82ef, U+8327, U+832c, U+8340, U+8343, U+8543, U+85d0, U+85e5, U+86e4, U+8712, U+8715, U+8717, U+8737, U+8785, U+87c0, U+87cb, U+87d2, U+8879, U+8936, U+8baa, U+8bb9, U+8bc3, U+8be0, U+8c11, U+8c1a, U+8c62, U+8de4, U+8df7, U+8dfa, U+8e1e, U+8e35, U+8e4b, U+8e51, U+8e6d, U+8e7f, U+8fe5, U+9035, U+916a, U+91ab, U+91dc, U+9497, U+94ce, U+94d0, U+95f5, U+9611, U+9713, U+97ec, U+996c, U+997a, U+9985, U+9992, U+9a79, U+9a7f, U+9ab7, U+9ac5, U+9b13, U+9ca8, U+9cc4, U+9e49, U+9ecf;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.19.woff2) format('woff2');
+ unicode-range: U+4e98, U+4f5a, U+4f7c, U+4ff8, U+504c, U+5080, U+50a3, U+50ed, U+5121, U+523d, U+536f, U+53df, U+5457, U+5478, U+5537, U+556c, U+5599, U+55df, U+55f3, U+564e, U+568f, U+5742, U+5777, U+587e, U+58d1, U+59d7, U+5a13, U+5a75, U+5ab2, U+5ad4, U+5bd0, U+5bf0, U+5c79, U+5c90, U+605a, U+6063, U+607b, U+607f, U+60ec, U+61f5, U+620c, U+6248, U+62a1, U+637a, U+6396, U+6482, U+64b8, U+64de, U+6525, U+6593, U+660a, U+664f, U+667e, U+6684, U+66a7, U+675e, U+67ad, U+6866, U+6930, U+6954, U+6988, U+6aac, U+6b24, U+6ba1, U+6c26, U+6c55, U+6c93, U+6cde, U+6d9f, U+6da3, U+6da7, U+6db8, U+6dd6, U+6e43, U+6e4d, U+6ea5, U+6ed5, U+6f33, U+701b, U+7096, U+70fd, U+7119, U+715c, U+71b9, U+728a, U+7313, U+7357, U+73e5, U+740f, U+7455, U+7490, U+749e, U+74ee, U+7504, U+7525, U+75b5, U+762a, U+7638, U+768b, U+7691, U+76c5, U+7708, U+7750-7751, U+777d, U+77b0, U+796f, U+79f8, U+7a37, U+7abf, U+7b19, U+7b75, U+7b93, U+7c0c, U+7edb, U+7eef, U+7f04, U+7f2e, U+7f30, U+7f61, U+7f9a, U+7fb2, U+7fb9, U+7fdf, U+80e4, U+80f1, U+8110, U+8354, U+837c, U+8426, U+8446, U+84d3, U+8517, U+8537, U+85d5, U+8638, U+868c, U+86c0, U+86ca, U+86f9, U+8708, U+873f, U+874e, U+8759, U+8783, U+87c6, U+87fe, U+891a, U+8bb7, U+8bd9, U+8be9, U+8bf0, U+8c00, U+8c19, U+8c29, U+8d30, U+8d53, U+8d61, U+8dda-8ddb, U+8e0a, U+8e1d, U+8e42, U+8e4a, U+8e59, U+8e8f, U+8f72, U+8f95, U+8f98, U+8fe2, U+9050, U+907d, U+9083, U+90af, U+9149, U+916e, U+92c6, U+946b, U+94a1, U+94be, U+9522, U+9535, U+9540, U+956f-9570, U+9609, U+9773, U+988d, U+989a, U+998b, U+9aa5, U+9cc3, U+9cd6, U+9e2f, U+9e33, U+9e3e, U+9e73, U+9ed4, U+9f3e, U+9f88;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.20.woff2) format('woff2');
+ unicode-range: U+4f2b, U+5043, U+531d, U+5345, U+53a9, U+5477, U+5482, U+54ab, U+555c, U+557e, U+558f, U+55eb-55ec, U+55f7, U+5664, U+5685, U+56d4, U+572a, U+579b, U+58ec, U+59a9, U+5a04, U+5a29, U+5a9b, U+5b7a, U+5c96, U+5cac, U+5cb1, U+5d47, U+5e96, U+5f64, U+5f87, U+5fa8, U+5fb5, U+5fd0-5fd1, U+6006, U+606b, U+60c6, U+6249, U+62a0, U+630e, U+634b, U+6382, U+642a, U+6485, U+65a1, U+6635, U+66dc, U+6840, U+6867, U+6886, U+690b, U+693f, U+6963, U+6995, U+69cc, U+69df, U+6a1f, U+6a47, U+6a79, U+6c50, U+6d04, U+6d35, U+6d93, U+6d9d, U+6dc7, U+6dd9, U+6dde, U+6e25, U+6e6e, U+6f7a, U+6f7c, U+6fd1, U+7078, U+710a, U+714a, U+7166, U+71ce, U+7252, U+72f0, U+73b7, U+749c, U+74d2, U+752c, U+753a, U+759f, U+75b1, U+75bd, U+75d8, U+75de, U+75e2-75e3, U+75eb, U+7600, U+7620, U+7663, U+76c2, U+778c, U+77a0, U+781a, U+7825, U+795b, U+79c6, U+7a51, U+7aa0, U+7b71, U+7bd3, U+7c41, U+7ce0, U+7d93, U+7eab, U+7ef6, U+7f28, U+7f54, U+7f79, U+7fe1, U+7ff1, U+8018-8019, U+8037, U+8146, U+817c, U+81fc, U+82a5, U+82ae, U+82d3, U+8309, U+8317, U+835a, U+835f, U+836a, U+8393, U+843c, U+84ff, U+8559, U+85b0, U+85d3, U+8671, U+8693, U+86a3-86a4, U+86aa, U+86af, U+86d0, U+86d4, U+86f0, U+8713, U+873b, U+874c, U+88a4, U+88c6, U+8c04, U+8c06, U+8c0c, U+8c25, U+8c27, U+8d48, U+8dfb, U+8e52, U+8f76, U+8f8d-8f8e, U+9019, U+9099, U+90f8, U+9157, U+9170, U+91ae, U+91ba, U+94ec, U+94ff, U+952d, U+9539, U+9541, U+95e9, U+95f0, U+95fe, U+9602, U+96bc, U+96f9, U+977c, U+9791, U+9894, U+98d3, U+98d9, U+9981, U+998d, U+9a8b, U+9aef, U+9afb, U+9c87, U+9cab, U+9cce, U+9cd7, U+9e5e, U+9e9d, U+9edc, U+9ee0, U+9f9b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.21.woff2) format('woff2');
+ unicode-range: U+4ec4, U+4fd1, U+4fda, U+500c, U+5048, U+51bd, U+527d, U+530d, U+5310, U+53c1, U+53f5, U+549b, U+549d, U+54bb, U+5511, U+556e, U+5575, U+557b, U+55e5, U+5624, U+567c, U+5729, U+57a0, U+57c2, U+5914, U+5919, U+5a11, U+5a32, U+5a4a, U+5b40, U+5b5b, U+5b62, U+5b6a, U+5b93, U+5b95, U+5bb8, U+5c8c, U+5cea, U+5f0b, U+5ffb, U+600f, U+61a9, U+61cb, U+623e, U+62c4, U+6371, U+63ac, U+63b0, U+6448, U+645e, U+647a, U+65cc, U+6619, U+6641, U+6773, U+67d1, U+67e0, U+683e, U+68e3, U+6924, U+6994, U+6998, U+69ad, U+69b7, U+6c10, U+6c32, U+6c69, U+6c74, U+6c85, U+6ca3, U+6cb1, U+6cd7, U+6cef, U+6d0c, U+6d5c, U+6d63, U+6e9f, U+6f15, U+6f5e, U+6fb9, U+6fc2, U+6fee, U+7080, U+70ef, U+70f7, U+71a0, U+71b5, U+724d, U+7325, U+737e, U+7579, U+7601, U+7634, U+765e, U+768e, U+7699, U+76f9, U+7762, U+7791, U+77ad, U+7827, U+78b4, U+7950, U+7957, U+7b94-7b95, U+7bb4, U+7bc6, U+7bdd, U+7c26, U+7c2a, U+7cbc, U+7cef, U+7ea3, U+7ead, U+7ebe, U+7f1c, U+7f42, U+8004, U+80c4, U+80eb, U+80ed, U+814c, U+81ca, U+81e7, U+8200, U+8210, U+828b, U+828d, U+8364, U+8368, U+839e, U+8431, U+84bf, U+84df, U+8568, U+866c, U+86c6, U+86ed, U+86f3, U+8703, U+8725, U+87b3, U+87d1, U+87e0, U+87ee, U+8821, U+8862, U+88e8, U+891b, U+8934, U+8bd2, U+8bff, U+8c14, U+8c1d, U+8c21, U+8c4c, U+8c7a, U+8c82, U+8e69, U+8f8f, U+8fe9, U+904e, U+90c5, U+915a, U+92ae, U+949a-949b, U+94e0, U+950f, U+9530, U+953a, U+9542, U+954c, U+9550, U+956d, U+9616, U+968d, U+96bd, U+972d, U+973e, U+97ed, U+98d2, U+98d5, U+9955, U+9968, U+9980, U+9990, U+9995, U+9a78, U+9ab0, U+9b03, U+9b47, U+9c88, U+9c91, U+9e35, U+9e44, U+9e51, U+9e6b, U+9ebe;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.22.woff2) format('woff2');
+ unicode-range: U+4f32, U+4f57, U+4f97, U+4fe6, U+507b, U+50ee, U+5106, U+51c7, U+520d, U+5241, U+535e, U+5453, U+54a3, U+550f, U+5530, U+5555, U+5577, U+559f, U+55b5, U+55d1, U+5601, U+562d, U+5659, U+566b, U+56e4, U+5773, U+57fd, U+5892, U+5925, U+592f, U+5958, U+59ab, U+5a40, U+5abe, U+5b34, U+5bee, U+5ccb, U+5d02, U+5d99, U+5e7a, U+5e8b, U+5e91, U+5ea0, U+5f01, U+5f08, U+6035, U+6078, U+6120, U+61d1, U+621b, U+626a, U+62ee, U+631e, U+6387, U+63b8, U+643d, U+64e2, U+659b, U+6631, U+6654, U+6748, U+679e, U+67b8, U+67da, U+67e9, U+693d, U+699b, U+69c1, U+6a50, U+6b46, U+6b81, U+6b92-6b93, U+6c30, U+6c8f, U+6cd3, U+6cfe, U+6d9e, U+6dae, U+6dbf, U+6dfc, U+6e4e, U+6ec2, U+6ed3, U+6ee6, U+6f62, U+6fe1, U+70e8, U+71a8, U+71d4, U+71ee, U+732c, U+736d, U+73de, U+7425, U+7428, U+757f, U+75b8, U+765c, U+7678, U+7768, U+7837, U+7949, U+7a88, U+7b1e, U+7b60, U+7ba9, U+7c91, U+7efa-7efb, U+7efe, U+7f08, U+7f25, U+7f2b, U+7f44, U+7fca, U+80bd, U+80ef, U+8174, U+8191, U+81c3, U+81fe, U+8207, U+822b, U+826e, U+82aa, U+82b7, U+82f7, U+82fb, U+8301, U+8369, U+836d, U+837b, U+8398, U+83e0, U+84d1, U+85dc, U+867b, U+869c, U+86a9, U+86b1, U+86c9, U+86ce, U+8734, U+876e, U+8882, U+8996, U+89ca, U+89ce, U+89d0, U+89e5, U+89ef, U+8bab, U+8bcb, U+8bdc, U+8be4, U+8bf3, U+8c16-8c18, U+8d4a, U+8d73, U+8e39, U+8e76, U+8fe8, U+8ff3, U+9005, U+905b, U+90ba, U+90cf, U+9131, U+916f, U+91af, U+92c8, U+94b0, U+94db, U+94e1, U+954d, U+9563, U+9573, U+95f1, U+967d, U+96c9, U+97af, U+98a7, U+98e7, U+996a, U+997d, U+9991, U+9a81, U+9a88, U+9aa7, U+9ad4, U+9cc5, U+9cdd, U+9e6d, U+9f87, U+9f8a, U+9f8c, U+9fa2;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.23.woff2) format('woff2');
+ unicode-range: U+4e69, U+4ee8, U+4f58, U+4f5e, U+4fea, U+50d6, U+5208, U+5250, U+525c, U+5476, U+54a4, U+54a9, U+54bf, U+54c2, U+5550, U+5576, U+55dd, U+55ea, U+55f2, U+55f5, U+5639, U+5654, U+5658, U+56e1, U+56ff, U+57a9, U+58f9, U+598d, U+59e3, U+5a23, U+5b51, U+5ba5, U+5cab, U+5cb7, U+5cd2, U+5d34, U+5d58, U+5e3c, U+5f11, U+5f95, U+5fdd, U+6029, U+603c, U+607d, U+610e, U+6175, U+61d4, U+629f, U+63c4, U+63c6, U+6421, U+6441, U+64b7, U+65ab, U+6615, U+6657, U+66b9, U+6775, U+6809, U+680e, U+684e, U+688f, U+6942, U+696b, U+6979, U+6989, U+6a3d-6a3e, U+6a84, U+6cc5, U+6cf8, U+6d39, U+6d94, U+6dc5, U+6de6, U+6ee2, U+6f4d, U+6fa7, U+6fef, U+723b, U+7284, U+7292, U+729f, U+72b7, U+72fb, U+7315, U+7360, U+742c, U+7441, U+7480, U+74a8, U+7566, U+75ff, U+7619, U+76e5, U+77fe, U+782d, U+783a, U+787c, U+789b, U+78a3, U+795a, U+7a95, U+7ad1, U+7ae6, U+7b25, U+7bd9, U+7c95, U+7ec9, U+7f45, U+7fe6, U+80db, U+80dd, U+80ea, U+80f4, U+814e, U+821b, U+827f, U+82a9, U+82c1, U+82e3, U+82eb, U+830f, U+832f, U+852b, U+858f, U+8707, U+871a, U+87a8, U+8839, U+883c, U+8869, U+8872, U+88df, U+8a48, U+8ba3, U+8bb4, U+8bcc, U+8be8, U+8bee, U+8c36, U+8d32, U+8d5d, U+8d6d, U+8dba, U+8e2e, U+8f71, U+8f94, U+8fe4, U+9082, U+9095, U+909d, U+90e2, U+914a, U+9162, U+919b, U+936a, U+948d, U+949c, U+94b4, U+94c2, U+94e3-94e4, U+94e8-94e9, U+94f0-94f1, U+951f, U+9528, U+9532, U+9537, U+95f6, U+95ff, U+9604, U+9608, U+9642, U+9701, U+970f, U+9730, U+9753, U+98e8, U+996f, U+9984, U+998a, U+998f, U+9997, U+99a5, U+9a9b, U+9ae1, U+9b51, U+9c7f, U+9c9f, U+9e2c, U+9e4c, U+9e57-9e58, U+9e82, U+9e8b, U+9e92, U+9f85;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.24.woff2) format('woff2');
+ unicode-range: U+4ec3, U+4f09, U+4fce, U+4fe3, U+4ff3, U+501c, U+50a5, U+5156, U+52d6, U+5326, U+539d, U+5464, U+5501, U+5591, U+59aa, U+59b2, U+59d8, U+5a55, U+5ab8, U+5b17, U+5b37, U+5b71, U+5b73, U+5c50, U+5cc1, U+5ce5, U+5d06, U+5d82, U+5e44, U+5ebe, U+5f2d, U+5fad, U+5ff8, U+608c, U+6215, U+6221, U+63ae, U+63ff, U+65d6, U+6636, U+6772, U+6860, U+69ab, U+69ed, U+6a5b, U+6b59, U+6c24, U+6c29, U+6ca4, U+6cf1, U+6cf7, U+6d43, U+6d54, U+6dec, U+6e0c, U+6e1a, U+6e5f, U+6eb4, U+7094, U+709c, U+70c3, U+70ca, U+70e9, U+7113, U+7168, U+7172, U+71e7, U+7230, U+7337, U+7511, U+75c2, U+75c8, U+75e4, U+75e8, U+77f8, U+7812, U+7823, U+7826, U+784e, U+7852, U+789c, U+7934, U+795c, U+79e3, U+7a17, U+7a2e, U+7a39, U+7aa3, U+7ab8, U+7afd, U+7b0f, U+7b15, U+7b24, U+7b2b, U+7bfe, U+7cb2, U+7d50, U+7ea5, U+7ecc, U+7ee6, U+7f19, U+7f22, U+7faf, U+7fbf, U+7ff3, U+8026, U+8028, U+8093, U+80b1, U+8198, U+8238, U+8244, U+82a8, U+82cb, U+82e1, U+8311, U+8385-8386, U+83cf, U+847a, U+84d6, U+85ae, U+865b, U+8662, U+869d, U+86a8, U+86b4, U+86de, U+86f4, U+870a, U+8748, U+87ea, U+886e, U+8888, U+88dc, U+88f1, U+8913, U+8921, U+8983, U+8a8a, U+8b07, U+8b8a, U+8bd3, U+8bd6, U+8bdf, U+8c32, U+8c55, U+8cea, U+8d5c, U+8d84, U+8d94, U+8df8, U+8e74, U+8f6d, U+9021, U+9068, U+9088, U+908b, U+909b, U+90e7, U+9146, U+91b4, U+933e, U+9397, U+93d6, U+93e1, U+94a8, U+94c9, U+9502-9503, U+9509, U+9534, U+954f, U+9577, U+9593, U+95fc, U+960b, U+9615, U+9670, U+9672, U+9697, U+9765, U+985e, U+988f, U+98a6, U+98da, U+9994, U+9a85, U+9a8a, U+9a9e, U+9ab6, U+9aed, U+9c82, U+9e22, U+9e28, U+9e6c, U+9ec3, U+9f10, U+9f39, U+9f89;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.25.woff2) format('woff2');
+ unicode-range: U+4f5d, U+4f7b, U+5028, U+520e, U+52ac-52ad, U+53a3, U+5421, U+544b, U+5454, U+54ad, U+54d0, U+556d, U+55c4, U+560c, U+5623, U+5627, U+5671, U+56df, U+56eb, U+573b, U+58c5, U+5924, U+5997, U+5a0c, U+5a7a, U+5aaa, U+5ca2, U+5d27, U+5d2e, U+5fe4, U+5ffe, U+6041-6042, U+6079, U+622c, U+62bb, U+65c3, U+65ce, U+677c, U+67b0, U+68c2, U+69ce, U+69ff, U+6a2f, U+6b87, U+6b9a, U+6bc2, U+6bd6, U+6c05, U+6c1a, U+6c68, U+6d31, U+6d60, U+6dab, U+6ddd, U+6f46, U+6f78, U+6fc9, U+6fe0, U+704f, U+725d, U+7396, U+73ae, U+73c8, U+73cf, U+740a, U+7430, U+74e4, U+74ef, U+7572, U+75a5, U+761b, U+77cd, U+781d, U+7887, U+789a, U+7947, U+7a14, U+7a70, U+7bd1, U+7cbd, U+7ec0, U+7ef1, U+7f02, U+7f1b, U+7f26, U+7f2c, U+7f9f, U+7fd5, U+8052, U+80cd, U+810d, U+8171, U+8178, U+81c1, U+81ec, U+8202, U+8284, U+828e-828f, U+8297, U+82a1, U+82be, U+82cc, U+82dc, U+835e, U+8365, U+8392, U+83df, U+83f8, U+8438, U+8469, U+84af, U+85ff, U+867c, U+86a7, U+86c4, U+86e9, U+879f, U+87ab, U+8813, U+8816, U+887e, U+8941, U+898b, U+89de, U+8aaa, U+8ba6, U+8bc2, U+8bf9, U+8c20, U+8c2a, U+8c2f, U+8dcf, U+8e14, U+8e47, U+8e7c, U+8f03, U+8f87, U+900b, U+9036, U+9051, U+9062, U+9074, U+9084, U+90ac, U+90db, U+90e6, U+9123, U+912f, U+9169, U+91aa, U+938f, U+948f, U+9492, U+94a4, U+94bf, U+94f5, U+9536, U+9549, U+958b, U+95f3, U+960f, U+9612, U+9617, U+9621, U+96d2, U+97a3, U+984c, U+9880, U+989e, U+98a2, U+990d, U+9954, U+9967, U+9969, U+996b, U+9a57, U+9ac1, U+9acb, U+9b08, U+9b49, U+9c86, U+9c8e, U+9c9b, U+9ca2, U+9ca7, U+9cb6, U+9cd5, U+9e29-9e2a, U+9e39, U+9e5a, U+9e5c, U+9ecd, U+9ede, U+9ee9, U+9f83, U+9f86;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.26.woff2) format('woff2');
+ unicode-range: U+4e5c, U+4fa9, U+5088, U+50f3, U+51eb, U+535f, U+536e, U+5412, U+5466, U+5472, U+55c9, U+55cc-55cd, U+56f5, U+56f9, U+571c, U+5785, U+57ad, U+5800, U+580b, U+59af, U+59d2, U+59f9, U+5a09, U+5ae0, U+5c98, U+5ce4, U+5d3e, U+5d4a, U+5dfd, U+5e19, U+5e42, U+5ea5, U+5fea, U+6106, U+6308, U+6332, U+63bc, U+63f6, U+643f, U+64e4, U+65ee-65ef, U+66f7, U+6777, U+6787, U+678b, U+67a5, U+67b3, U+67de, U+67e2, U+6841, U+6849, U+69a7, U+69ca, U+6c18, U+6c2a, U+6c4a, U+6d6f, U+6daa, U+6e86, U+6f74, U+7116, U+7131, U+7256, U+7266, U+7350, U+73e9, U+742e, U+746d, U+759d, U+75fc, U+7618, U+77fd, U+7809, U+7829, U+786a, U+7893, U+78ec, U+79b3, U+7b0a, U+7b2a, U+7b2e, U+7b33, U+7b38, U+7b3e, U+7b9d, U+7bb8, U+7c1f, U+7ea1, U+7ea8, U+7eb0, U+7ed4, U+7f01, U+7f1f, U+7f36, U+8069, U+80bc, U+80e8, U+8132, U+816d, U+8188, U+8222, U+823b, U+82ab, U+82b0, U+82c4, U+82d5, U+8334, U+835b, U+839c, U+83a0, U+83b4, U+83b8, U+83c0, U+83c5, U+83d6, U+83ec, U+84ba, U+853a, U+8572, U+868b, U+86f1, U+870d, U+8722, U+8788, U+87db, U+880a, U+8832, U+88a2, U+88b7, U+88e2, U+88f0, U+8ad6, U+8b49, U+8ba7, U+8bb5, U+8bce, U+8bd4, U+8d4d, U+8db8, U+8dbf, U+8dce, U+8dde, U+8df9, U+8e05, U+8e3d, U+9016, U+9032, U+90c3, U+90d3, U+90ef, U+90f4, U+9122, U+919a, U+91a2, U+93ca, U+94b9, U+94c6, U+9511-9512, U+9515, U+954a, U+9552, U+9562, U+95dc, U+9603, U+9606, U+960c-960d, U+96f1, U+975b, U+97ea, U+9808, U+982d, U+98a8, U+990a, U+992e, U+9974, U+9993, U+9a14, U+9a77, U+9a93, U+9aa0, U+9ac2, U+9b23, U+9b3b, U+9b43, U+9b4d, U+9cca, U+9ccf, U+9cdf, U+9e37, U+9e46, U+9e55, U+9e67, U+9e69, U+9ebc, U+9efe, U+9f0b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.27.woff2) format('woff2');
+ unicode-range: U+4e47, U+4ede-4edf, U+4f25, U+4f64, U+4f70, U+4f76, U+4faa, U+50e6, U+51fc, U+5216, U+52a2, U+52d0, U+52f0, U+530f, U+531a, U+5363, U+538d, U+54b4, U+54d4, U+5541, U+5556, U+55fe, U+5704, U+572e, U+57d9, U+5941, U+5a06, U+5b6c, U+5b84, U+5be4, U+5c59, U+5cc4, U+5d03, U+5d6c, U+5d74, U+5e11, U+5eea, U+5f40, U+5f89, U+6004, U+6092, U+60ad, U+6100, U+610d, U+634c, U+63b4, U+63be, U+64c0, U+64d8, U+65c6, U+6600, U+665f, U+6710, U+67d8, U+6800, U+6861, U+6934, U+6987, U+69f2, U+6a17, U+6c21, U+6d19, U+6d5e, U+6d91, U+6e6b, U+6edf, U+709d, U+70b7, U+7198, U+71b3, U+726f, U+728d, U+72ce, U+736c, U+736f, U+73b3, U+73d0, U+7548, U+755a-755b, U+7596, U+75cd, U+763f, U+766f, U+7747, U+77ec, U+783b, U+784c, U+7850, U+7857, U+7877, U+78a1, U+78d4, U+7a1e, U+7a31, U+7b31, U+7b6e, U+7ba7, U+7bc0, U+7bea, U+7c74, U+7cb3, U+7cc1, U+7cc5, U+7d30, U+7da6, U+7e2f, U+7e47, U+7f03, U+7f17, U+7fb8, U+802a, U+8043, U+8084, U+809f, U+80ab, U+80d7, U+816b, U+8249, U+824f, U+829f, U+82ce, U+82e4, U+82f4, U+8331, U+83d4, U+859c, U+8655, U+867a, U+867f, U+86d1, U+86d8, U+872e, U+877c, U+87ad, U+87ca, U+8853, U+88e5, U+88fe, U+89f3, U+8a07, U+8a3a, U+8abf, U+8bf6, U+8c07, U+8c30, U+8c89, U+8d3d, U+8d45, U+8d67, U+8dc6, U+8dd7, U+8e5a, U+8f73, U+8f78, U+9026, U+9052, U+90a8, U+9104, U+91dd, U+9322, U+9485, U+94aa, U+94ba, U+94bc, U+94c4, U+94e7, U+9506, U+9529, U+9538, U+9567, U+95eb, U+96ce, U+96e0, U+9792, U+97ab, U+97b4, U+989b, U+98f2, U+9983, U+9a9c, U+9b2f, U+9c80, U+9c85, U+9c8b, U+9ca1, U+9cae, U+9cb0-9cb2, U+9e31, U+9e41-9e42, U+9e68, U+9ee2, U+9f0d, U+9f2c, U+9f51, U+9f80;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.28.woff2) format('woff2');
+ unicode-range: U+4e93, U+4eb3, U+4f27, U+4f65, U+4f94, U+4fc5, U+5025, U+502c, U+502e, U+507e, U+50a7, U+51bc, U+5452, U+54cc, U+54de, U+5533, U+553f, U+5549, U+5581, U+55be, U+560f, U+561e, U+564c, U+5768, U+57a1, U+5807, U+5889, U+5a67, U+5ad8, U+5af1, U+5b16, U+5cb5, U+5cbf, U+5d1e, U+5d9d, U+5e14, U+5edb, U+5f9c, U+6019, U+601b, U+602b, U+6126, U+614a, U+6206, U+6266, U+62ca, U+646d, U+64ba, U+6634, U+6677, U+668c, U+6753, U+67b5, U+6901, U+695d, U+6966, U+6978, U+69b1, U+6aa9, U+6b9b, U+6ce0, U+6d2e, U+6d33, U+6e11, U+6ec1, U+6f8d, U+705e, U+7110, U+712f, U+7145, U+7178, U+72ef, U+72f2, U+72f7, U+7322, U+73f2, U+748e, U+74f4, U+7519, U+7583, U+75b4, U+75f1, U+76cd, U+7726, U+7817, U+7839, U+7a80, U+7b04, U+7c9c-7c9d, U+7ca2, U+7d05, U+7d9d, U+7db2, U+7e3b, U+7e7b, U+7ef2, U+7f07, U+7f12, U+7f2f, U+7f31, U+7f58, U+7f5f, U+7f71, U+7f74, U+7f7e, U+7fa7, U+7fb0, U+8012, U+80b7, U+80c2, U+80fc, U+8118, U+815a, U+8166, U+81bb, U+81df, U+81e8, U+8228, U+827d, U+828a, U+82a4, U+8314, U+834f, U+8360, U+837d, U+83bc, U+83f9, U+83fd, U+840b, U+8411, U+8418, U+844e, U+846d, U+853b, U+85a8, U+85b9, U+8605, U+8616, U+86ac, U+86b6, U+86cf, U+8709, U+8723, U+8763, U+877d, U+87ac, U+87af, U+881b, U+887d, U+887f, U+88c9, U+88ce, U+88e1, U+88fc, U+892b, U+8a8d, U+8bfc, U+8de3, U+8deb, U+8e2f, U+8e70, U+8e85, U+8f15, U+9069, U+90fe, U+91a3, U+91b5, U+943e, U+948b-948c, U+9495, U+94a3, U+94ad, U+94cd, U+94f3, U+9517, U+9546, U+955b, U+955e, U+956b, U+9649, U+965f, U+96b3, U+96d6, U+97eb, U+988e, U+9ab1, U+9acc, U+9ad1, U+9b48, U+9ca0, U+9cd4, U+9cda, U+9ce2, U+9e2b, U+9e36, U+9eb8, U+9f17, U+9f19;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.29.woff2) format('woff2');
+ unicode-range: U+4eeb, U+506c, U+510b, U+5456, U+54d9, U+55b1, U+562c, U+567b, U+56af, U+581e, U+586c, U+5880, U+5ad2, U+5b32, U+5c25, U+5ca3, U+5d24, U+5d5b, U+5d5d, U+5d6f, U+5e0f, U+5e5b, U+5e80, U+5eb9, U+60b1, U+61b7, U+6217, U+6225, U+6339, U+6369, U+636d, U+6535, U+656b, U+66db, U+66e9, U+670a, U+6864, U+696e, U+69d4, U+6a18, U+6b39, U+6c5c, U+6c86, U+6cd4, U+6ceb, U+6cee, U+6cf6, U+6d7c, U+6e16, U+6e54, U+6e98, U+6ea7, U+6fb6, U+6fde, U+7023, U+7085, U+70b1, U+70bb, U+7173, U+71f9, U+72b8, U+72cd, U+730a, U+7317, U+738e, U+73a2, U+7477, U+74e0, U+752f, U+753e, U+7540, U+75a0, U+75b3, U+75e7, U+7654, U+76b4, U+76f1, U+7707, U+7743, U+7765, U+778b, U+77bd, U+77c7, U+7800, U+781c, U+7856, U+78d9, U+7955, U+7987, U+79eb, U+7a78, U+7aa8, U+7aad, U+7ab3, U+7b47, U+7baa, U+7bc1, U+7be6, U+7bef, U+7c7c, U+7cc7, U+7d04, U+7d44, U+7d71, U+7de9, U+7e8c, U+7ee8, U+7f21, U+7f23, U+8080, U+80ad, U+80d9, U+823e, U+8291, U+82ca, U+83a9-83aa, U+83d8, U+8451, U+845a, U+848c, U+84fc, U+8556, U+8629, U+863c, U+866e, U+868d, U+86b0, U+86f2, U+87bd, U+8844, U+88bc, U+88e3, U+890a, U+8930, U+89ba, U+89c0, U+8acb, U+8b1d, U+8c35, U+8d40, U+8e49, U+8f49, U+8f6b, U+8f8a, U+8f9a, U+8fd3, U+8fd5, U+9004, U+9011, U+902d, U+902f, U+9044, U+904b, U+90b0, U+911e, U+9143, U+9150, U+918d, U+91ad, U+928e, U+9487, U+948e, U+9494, U+94ab, U+94af, U+94cb, U+94d2, U+94ef, U+950a, U+951b-951c, U+9531, U+953c, U+953f, U+960a, U+96b1, U+96b9, U+96e2-96e3, U+9794, U+9838, U+9987, U+9a7a, U+9a7d, U+9ac0, U+9b1f, U+9b88, U+9c83, U+9c9a, U+9cc7, U+9cd9, U+9e3a, U+9e48, U+9e6a, U+9e6e, U+9e71, U+9e7e, U+9e87, U+9ee7;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.30.woff2) format('woff2');
+ unicode-range: U+4ee1, U+4f1b, U+4f89, U+4fdc, U+50ec, U+523f, U+5423, U+54cf, U+54ff, U+5522, U+55b9, U+5793, U+57b4, U+59a3, U+59dd, U+5b65, U+5c15, U+5c3b, U+5c9c, U+5d26, U+5d6b, U+5f58, U+609d, U+60ab, U+6434, U+6484, U+6549, U+65c4, U+65d2, U+65f0, U+6661, U+669d, U+66be, U+674c, U+676a, U+67d9, U+680c, U+6874, U+6939, U+698d, U+69e0, U+6a65, U+6a8e, U+6aa0, U+6b84, U+6b8d, U+6bb3, U+6c19, U+6da0, U+6e2b, U+6e53, U+6e8f, U+6eb2, U+6ef9, U+6f2f, U+717a, U+7228, U+72fa, U+7321, U+734d, U+7457, U+74a9, U+74ff, U+7513, U+754b, U+76a4, U+76b2, U+7719, U+772c, U+775a, U+7818, U+782c, U+7847, U+786d, U+78ba, U+78f4, U+7946, U+794e, U+7962, U+79ed, U+7a40, U+7a4d, U+7a86, U+7aac, U+7b4c, U+7b72, U+7ccc, U+7d0d, U+7d39, U+7dad, U+7dda, U+7e2e, U+7e54, U+7ee1, U+7f0c, U+7f11, U+7f27, U+7f68, U+7fa9, U+7fbc, U+7fd2, U+7fe5, U+809c, U+80e9, U+8108, U+8114, U+8139, U+8182, U+822f, U+825a, U+825f, U+82b4, U+82d2, U+8315, U+832d, U+8348, U+8366, U+8378, U+83a8, U+83b3, U+83e1, U+83ea, U+83f0, U+845c, U+84a1, U+84b4, U+84cd, U+8579, U+8585, U+85c1, U+8627, U+877e, U+87e5, U+885b, U+89da, U+8a3e, U+8a71, U+8c02, U+8c33, U+8c47, U+8c49, U+8ca2, U+8d49, U+8db5, U+8dd6, U+8dec, U+8df6, U+8e1f, U+8e40, U+8e53, U+8edf, U+8f82, U+8fa6, U+9023, U+9054, U+9078, U+907a, U+90b3, U+9139, U+917d, U+9190, U+9224, U+9490, U+94bd, U+94cc, U+94d1, U+9507, U+950d, U+9513-9514, U+9516, U+9518, U+951d-951e, U+952a, U+952c, U+9544-9545, U+9553, U+956a, U+956c, U+9580, U+9589, U+961a, U+97b2, U+97ff, U+9810, U+9867, U+986f, U+98cf, U+9a98, U+9adf, U+9b46, U+9c94, U+9ca5, U+9cb5, U+9cb7, U+9e32, U+9e38, U+9efc;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.31.woff2) format('woff2');
+ unicode-range: U+4ef5, U+4f74, U+4f91, U+50ba, U+5240, U+5261, U+5282, U+53fb, U+5416, U+5432, U+5459, U+54d3, U+5769, U+577c, U+57a7, U+5844, U+58bc, U+5981, U+5a08, U+5adc, U+5aeb, U+5b53, U+5c63, U+5cbd, U+5db7, U+5def, U+5ee8, U+5fbc, U+5fc9, U+6003, U+600d, U+603f, U+609b, U+6222, U+623d, U+63ce, U+6603, U+6769, U+6798, U+67a8, U+67f0, U+680a, U+6855, U+686b, U+6877, U+68f9, U+68fc, U+6b37, U+6b43, U+6bfd, U+6c06-6c07, U+6cad, U+6d07, U+6de0, U+6f4b, U+6f8c, U+70c0, U+71e0, U+7301, U+731e, U+7352, U+73c9, U+74ba, U+750f, U+754e, U+7594, U+760c, U+7630, U+77ef, U+7811, U+783c, U+78a5, U+78b2, U+78b6, U+78f2, U+794f, U+7967, U+79d5, U+7ac5, U+7b46, U+7ba8, U+7c21, U+7c40, U+7c64, U+7c8b, U+7ccd, U+7cd7, U+7ce8, U+7d61, U+7d66, U+7df4, U+7e3d, U+7e9b, U+7ebb, U+7f0b, U+7f0d, U+7f9d, U+800b, U+801c, U+806c, U+8167, U+81bd, U+8233-8234, U+8268, U+8288, U+82c8, U+8351, U+83b6, U+8401, U+8406, U+842c, U+8473, U+8476, U+8478, U+84ca, U+8564, U+8570, U+85b7, U+86b5, U+877b, U+878b, U+8793, U+87f2, U+88b4, U+8919, U+898f, U+8a08, U+8a13, U+8a2d, U+8a66, U+8a9e, U+8aa4, U+8b02, U+8b58, U+8b70, U+8b77, U+8b80, U+8b93, U+8c2e, U+8c3f, U+8c42, U+8c73, U+8c98, U+8c9d, U+8cc7, U+8dbc, U+8dfd, U+8f7e, U+8f8b, U+9060, U+90dc, U+9129, U+918c, U+91cb, U+94d9, U+950e, U+952b, U+953e, U+9554, U+9557, U+955d, U+966c, U+96a8, U+96b0, U+96fb, U+9708, U+97ac, U+9805, U+983b, U+9852, U+9878, U+989f, U+98a1, U+9a90, U+9a96, U+9aba, U+9af9, U+9b06, U+9c15, U+9c3d, U+9c56, U+9c67, U+9c72, U+9c8c, U+9cad, U+9cb3, U+9cd0, U+9ce1, U+9d70, U+9e2e, U+9e3b, U+9e47, U+9e4b, U+9e5b, U+9e63, U+9eb4, U+9ed2, U+9ee5;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.32.woff2) format('woff2');
+ unicode-range: U+4f7e, U+5107, U+5281, U+54da, U+56dd, U+5709, U+572f, U+5739, U+574c, U+577b, U+5786, U+57d2, U+57da, U+5819, U+584d, U+5c22, U+5c99, U+5e3b, U+5f56, U+5f82, U+6083, U+60dd, U+615d, U+6243, U+6420, U+6426, U+6499, U+661d, U+67fd, U+6832, U+68f0, U+691f-6920, U+6a28, U+6aab, U+6bf5, U+6c3d, U+6c94, U+6d0e, U+6d4d, U+6eb1, U+6eb7, U+6ebd, U+6f36, U+727e, U+72b4, U+72c1, U+72f4, U+7331, U+739f, U+73d9, U+75ac, U+76e1, U+7722, U+773e, U+7780, U+77fb, U+781f, U+78fb, U+7905, U+790c, U+790e, U+7953, U+7a69, U+7b5a, U+7bc4, U+7c9e, U+7cab, U+7d1a, U+7d55, U+7d5c, U+7e7c, U+7eae, U+7ec1-7ec2, U+7f0f, U+7f1e, U+7f35, U+7fd9, U+8071, U+80ec, U+8129, U+812b, U+8148, U+8173, U+819a, U+81a0, U+81bf, U+81e5, U+822d, U+824b, U+8298, U+8300, U+831b, U+8347, U+835c, U+83dd, U+83e5, U+840f, U+841c, U+8449, U+84cb, U+84da, U+8548, U+857b, U+8591, U+85da, U+85f4, U+8667, U+86ba, U+86f8, U+8731, U+8753, U+8770, U+8856, U+88fd, U+895e, U+897b, U+89c7, U+89cb, U+8a0e, U+8a18, U+8a31, U+8c8a, U+8c94, U+8caa, U+8cac, U+8d52, U+8d5f, U+8d91, U+8db1, U+8e2c, U+8e30, U+8e9e, U+8eca, U+8f09, U+8fee, U+8ff4, U+9031, U+908a, U+90a0, U+90bd, U+90d7, U+90ff, U+9117, U+915e, U+9161, U+9164, U+91a1, U+932f, U+936c, U+93ae, U+9486, U+94c8, U+94ca, U+94d6-94d7, U+94e6, U+954e, U+9560-9561, U+9568, U+95b1, U+9607, U+9654, U+9673, U+9678, U+9688, U+968e, U+96aa, U+96d9, U+96dc, U+96f0, U+975c, U+985f, U+9871, U+9899, U+9902, U+9918, U+9a5a, U+9a80, U+9a8e, U+9a99, U+9a9d, U+9aeb, U+9aee, U+9b18, U+9b8a, U+9ba0, U+9bae, U+9c47, U+9cb4, U+9cbd, U+9cdc, U+9d87, U+9e4e, U+9e88, U+9efb, U+9f29, U+9f8d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.33.woff2) format('woff2');
+ unicode-range: U+5233, U+5293, U+537a, U+5523, U+5588, U+5686, U+57b8, U+57dd, U+57e4, U+57ef, U+57f8, U+5881, U+5ab5, U+5e5e, U+5ed1, U+5fee, U+6067, U+620b, U+62f6, U+638a, U+63e0, U+641b, U+6445, U+6509, U+652e, U+6534, U+67d2, U+67dd, U+6833, U+6883, U+6a7c, U+6a97, U+6b82, U+6cd0, U+6cfa, U+72b0, U+72f3, U+741a, U+7610, U+7617, U+764d, U+771a, U+7787, U+778d, U+77e7, U+784f, U+7881, U+78c9, U+7919, U+7986, U+798a, U+79fe, U+7a13, U+7a1c, U+7b90, U+7b9c, U+7bac, U+7bcc, U+7be0, U+7c0b, U+7c0f, U+7c8e, U+7caf, U+7cde, U+7d77, U+7dae, U+7dca, U+7e20, U+7e94, U+7ed0, U+7fee, U+8035, U+804d, U+8072, U+807d, U+8112, U+811e, U+8158, U+81a9, U+81ac, U+81af, U+81cd, U+8201, U+8208, U+8256, U+8306-8307, U+8332, U+83c3, U+83e7, U+83ef, U+8490, U+8497, U+84a8, U+84b9, U+84c1, U+84d0, U+84e3, U+84e5, U+855e, U+85ed, U+865f, U+8729, U+873e, U+8765, U+889d, U+88aa, U+88d2, U+8907, U+8914, U+8966, U+89cf, U+89eb, U+89f8, U+8a72-8a73, U+8ac7, U+8ae1, U+8af8, U+8b5e, U+8b89, U+8c1e, U+8c2b, U+8c68, U+8c85, U+8c93, U+8ca0, U+8ca9, U+8cb4, U+8cbb-8cbc, U+8d59, U+8e41, U+8e60, U+8e6f, U+8e7b, U+8e90, U+8f36, U+8faf, U+8ffb, U+9079, U+9097, U+90e4, U+90eb, U+91c6, U+91d0, U+934f, U+93af, U+942e, U+94ac, U+94b8, U+94d5, U+94df, U+94eb, U+94f7, U+955f, U+962f, U+963c, U+9660, U+9674, U+969b, U+96de, U+96e9, U+9728, U+972a, U+9748, U+9806, U+9817, U+984f-9850, U+9883, U+98db, U+98ef, U+9978, U+997e, U+9998, U+9a69, U+9aa2, U+9b31, U+9b5f, U+9b9f, U+9c8f-9c90, U+9c95, U+9ca6, U+9ca9, U+9cbb, U+9cbf, U+9cc8, U+9cd1, U+9cf4, U+9dc9, U+9ddf, U+9e30, U+9ea5, U+9ebf, U+9edf, U+9ef9, U+9f02, U+9f82;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.34.woff2) format('woff2');
+ unicode-range: U+4ec2, U+4edd, U+5155, U+551b, U+564d, U+572c, U+576d, U+57a4, U+57cf, U+57d5, U+57d8, U+57ed, U+57f4, U+580d, U+5820, U+593c, U+59a4, U+5c66, U+5fed, U+619d, U+63f8, U+64d0, U+67c1, U+6844, U+6910, U+6c46, U+6c54, U+6d2b, U+6ecf, U+721d, U+72c3, U+7339, U+73e7, U+7481, U+7625, U+7633, U+7635, U+7643, U+76e4, U+7704, U+770a, U+770d, U+7843, U+78fe, U+7913, U+7942, U+799b, U+7b74, U+7b78, U+7c33, U+7d00, U+7d2c, U+7d41-7d42, U+7d72, U+7d9c, U+7db1, U+7de1, U+7e78, U+7e96, U+7ea9, U+7ecb, U+7ed6, U+7f33, U+7f3b, U+7fdb, U+805e, U+80e0, U+812c, U+8160, U+8169, U+81ab, U+81ae, U+81c5, U+81c9, U+81cc, U+8204, U+8209, U+830c, U+8316, U+8477, U+84bd, U+84ee, U+8500, U+850c, U+850e, U+852f, U+857a, U+857f, U+85a4, U+8607, U+860b, U+8661, U+8701, U+8766, U+8798, U+87b5, U+87eb, U+8803, U+880b, U+8886, U+888a, U+8893, U+889b, U+88dd, U+89a9, U+8a09, U+8a22, U+8a55, U+8a5e, U+8a7e, U+8a8c, U+8b34, U+8b39, U+8b9f, U+8bea, U+8c90, U+8c99, U+8d06-8d07, U+8d33, U+8d36, U+8d55, U+8da8, U+8dbd, U+8e50, U+8e68, U+8e9c, U+8f14, U+8f33, U+8f4e, U+8f79-8f7a, U+8f80, U+8fb2, U+90a1, U+90b4, U+90be, U+90c4, U+9172, U+917a, U+9240-9241, U+9280, U+92a7, U+92ec, U+9304, U+934b, U+9369, U+93b0, U+9418, U+9451, U+94b2, U+94d3, U+94ea, U+9628, U+963d, U+9663, U+968a, U+96f2, U+9705, U+9711, U+9766, U+9770, U+9778, U+97a1, U+97ae, U+9818, U+982b, U+9857, U+992c, U+9979, U+99ee, U+9a03, U+9a75, U+9a83, U+9ac6, U+9b02, U+9b32, U+9ba1, U+9ba3, U+9bd4, U+9bee, U+9c1c, U+9c21, U+9c89, U+9c9e, U+9cc0, U+9d25, U+9d73, U+9e0a, U+9e61, U+9e7c-9e7d, U+9e84, U+9f2f, U+9f37, U+9f7e, U+9f81, U+9fa0;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.35.woff2) format('woff2');
+ unicode-range: U+553c, U+575c, U+576b, U+5c88, U+605d, U+6343, U+67a7, U+6980, U+6d27, U+6ee0, U+6f72, U+6f89, U+750d, U+7615, U+772d, U+7752, U+777a, U+77a2, U+7871, U+791e, U+796b, U+798d, U+79bf, U+7aa9, U+7b30, U+7b4d, U+7b96, U+7ba6, U+7bda, U+7be5, U+7c65, U+7c8c, U+7c9a, U+7d14, U+7d19, U+7d24, U+7d45, U+7d7c-7d7d, U+7de3, U+7e31, U+7e6b, U+7e81, U+7ee0, U+7f3d, U+7f63, U+7f7d, U+7fb6, U+7fe7, U+7ff9, U+8016, U+8027, U+8031, U+8056, U+805b, U+806d, U+806f, U+8077, U+808f, U+812e, U+81a6, U+81b6, U+81b9, U+81cf, U+81dc, U+8216, U+8221, U+8308, U+8310, U+833c, U+8396, U+83a4, U+83d1, U+8429, U+844c, U+8470, U+8545, U+8599, U+8652, U+871e, U+8764, U+8797, U+879d, U+885d, U+88a3, U+88a7, U+88c8, U+89cc-89cd, U+89d4, U+8a04, U+8a0a, U+8a17, U+8a19, U+8a62, U+8a96, U+8a98, U+8ab2, U+8af9, U+8b3f, U+8c50, U+8c6c, U+8c8f, U+8ca7, U+8cb7, U+8cc8, U+8ce6, U+8cf4, U+8d05, U+8d46-8d47, U+8dd0, U+8e23, U+8e45, U+8e5f, U+8e84, U+8ebc, U+8ecc, U+8f13, U+8f38, U+8fbb, U+8fef, U+903f, U+9046, U+9058, U+9072, U+90b2, U+90b6, U+90c7, U+90d5, U+90d9, U+911a, U+912c, U+9156, U+9179, U+9185, U+91e4, U+9226, U+9264, U+92b3, U+92f5, U+92f9, U+9375, U+93ad, U+9423, U+943b, U+9498, U+94cf, U+94da, U+94fc, U+9559, U+9569, U+9571, U+9574, U+9592, U+959f, U+95a4, U+95ae, U+95c6-95c7, U+9618, U+9641, U+9667, U+96bb, U+97fb, U+9863, U+9869, U+98a5, U+98d1, U+98d7, U+98fd, U+9917, U+994b, U+99ac, U+99da, U+9a3e, U+9a95, U+9b4b, U+9b80, U+9b84, U+9bc6, U+9bd2, U+9bdd, U+9c01, U+9c28, U+9c32, U+9c64, U+9c6f, U+9c75, U+9c99, U+9cc1, U+9cd3, U+9cd8, U+9e40, U+9e79, U+9e91, U+9ee8, U+9f41, U+9f52, U+9f61;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.36.woff2) format('woff2');
+ unicode-range: U+4ec9, U+4ef3, U+5290, U+54d5, U+552a, U+5eb3, U+5ed2, U+640b, U+681d, U+6baa, U+6c15, U+6cd6, U+6d1a, U+6ebb, U+6ed7, U+7039, U+728b, U+75e6, U+76c7, U+76e3, U+7730, U+7733, U+7735, U+774f, U+7793, U+77d4, U+77de, U+785a, U+7895, U+7921, U+7926, U+7954, U+796a, U+797c, U+798b, U+7998, U+79f5, U+7a03, U+7a48-7a4a, U+7b1f, U+7b39, U+7b45, U+7b58, U+7b62, U+7ba0, U+7be9, U+7bf8, U+7c3e, U+7cc8, U+7d6a, U+7d8e, U+7dd2, U+7ef9, U+7f76, U+7f91, U+7fc0, U+7fc3, U+8029, U+80f2, U+8105, U+8144, U+81ad, U+81b5, U+81ce, U+81d1-81d2, U+81fa, U+8232, U+825e, U+82fe-82ff, U+833a, U+839b, U+83be, U+83cd, U+83e2, U+8459, U+8474, U+84b7, U+84bc, U+8502, U+8538, U+8557, U+8561, U+85bf, U+85de, U+873a, U+8758, U+875f, U+87ec, U+8852, U+8889, U+8891, U+88a0, U+88a9, U+8955, U+8962, U+89dd, U+89f1, U+8a02, U+8a12, U+8a1a, U+8b1b, U+8b3a, U+8b62, U+8b9d, U+8bd0, U+8c09, U+8c9e, U+8caf, U+8ce3, U+8ce8, U+8cf8, U+8cfc, U+8d95, U+8da5, U+8da9, U+8dcd, U+8dd3, U+8e64, U+8e94, U+8ecd, U+8ef8, U+8eff, U+8f58, U+8f75, U+900c, U+904a, U+9055, U+905e, U+90bf, U+90d0, U+9109, U+9130, U+918a, U+91bf, U+91d8, U+9227-9229, U+92fc, U+93f0, U+9413, U+9481, U+953d, U+9548, U+955a, U+9583, U+95b7, U+95c5, U+95ca, U+9683, U+96d4, U+971a, U+9793, U+97e5, U+9802-9803, U+9809, U+9820, U+98e2, U+9951, U+9958, U+9982, U+99f5, U+99f8, U+9a40, U+9a45, U+9a9f, U+9aaf, U+9ad2, U+9ae4, U+9b0f, U+9b1b, U+9b5a, U+9bbb, U+9c09, U+9c2a, U+9c65, U+9c7e, U+9c84, U+9c8a, U+9c9d, U+9ca3, U+9cc6, U+9cc9, U+9ce4, U+9cf0, U+9d2b, U+9d31, U+9d8e, U+9e5f, U+9e97, U+9ec9, U+9eea, U+9ef4, U+9f9c, U+9fa4;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.37.woff2) format('woff2');
+ unicode-range: U+522d, U+525e, U+54dc, U+5f61, U+6322, U+638e, U+63de, U+63f2, U+6971, U+6a91, U+6c0d, U+7303, U+75d6, U+7605, U+760a, U+763c, U+770e, U+7725, U+772b, U+7746, U+774a, U+775e, U+776a, U+77bc, U+7822, U+7832, U+7841, U+78bc, U+798e, U+7991, U+79a6, U+79ec, U+7a05, U+7a16, U+7a1f, U+7a6a, U+7a8b, U+7ac7, U+7b07, U+7b66, U+7b70, U+7b85, U+7ba2, U+7bc2, U+7c30, U+7c60, U+7ca1, U+7ca3, U+7ca9, U+7cba, U+7cc0, U+7d5b, U+7d96, U+7da0, U+7ddb, U+7de8, U+7e21, U+7e2b, U+7e3f, U+7e50, U+7f0a, U+7feb, U+8060, U+8074, U+8085, U+812d, U+8159, U+820a, U+8246, U+8248, U+8337, U+8345, U+83c9, U+83f5, U+8487, U+84be, U+84c7, U+84cf, U+84e0, U+84f0, U+84f4, U+8514, U+851f, U+855a, U+85b3, U+85db, U+8606, U+862d, U+866f, U+86a2, U+86e3, U+877f-8780, U+87ed, U+8883, U+889a, U+889e, U+88cf, U+890b, U+8927, U+892f, U+89aa, U+89d6, U+8a34, U+8a63, U+8b26, U+8b95, U+8b9a, U+8bac, U+8ca1, U+8cee, U+8d0f, U+8d20, U+8d57, U+8de1, U+8dfc, U+8e10, U+8e21, U+8e26, U+8e7e, U+8ec5, U+8ed3, U+8f3e, U+905d, U+9061, U+906f, U+9086, U+90cb, U+911c, U+9126, U+9142, U+9147, U+914e, U+9174, U+919c, U+91d9, U+9244-9245, U+924f, U+92b7, U+9306, U+930f, U+931e, U+938c, U+940f, U+9468, U+94b7, U+94e5, U+956e, U+9572, U+95a3, U+95b6, U+95c9, U+9613, U+961b, U+965e, U+9684, U+96ee, U+9749, U+9763, U+9779-977a, U+977f, U+97a8, U+97f0, U+97f2, U+9801, U+98d6, U+98e9, U+98ed, U+9916, U+99f0, U+9a3b, U+9a5f, U+9ae3, U+9af3, U+9b7e, U+9bd5, U+9c92, U+9caa, U+9caf, U+9d95, U+9dba, U+9dc3, U+9e02, U+9e6f, U+9e83, U+9e86, U+9e90, U+9e95, U+9e9a, U+9e9c, U+9ea8, U+9eb9, U+9f22, U+9f31, U+9f67, U+9f6e, U+9f78, U+9f7b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.38.woff2) format('woff2');
+ unicode-range: U+5181, U+5e31, U+6224, U+6bf3, U+75b0, U+75c4, U+76e6, U+7744, U+7786, U+78bb, U+78dc, U+78e1, U+7904, U+79a3, U+79b1, U+79f1, U+7a94, U+7add, U+7b2d, U+7b4a, U+7b7c, U+7bc9, U+7bf0, U+7c8a, U+7c8f, U+7cf7, U+7d17, U+7d1b, U+7d2e, U+7d43, U+7d6b, U+7d7a, U+7d7f, U+7d88, U+7dbc, U+7dbf, U+7def, U+7e98, U+7f32, U+7fba, U+7fc9, U+7fec, U+8022, U+80f5, U+8126-8127, U+813a, U+816a, U+817d, U+81c7, U+81cb, U+81d0, U+81d3, U+81e2, U+8266, U+8296, U+82e0, U+82e7, U+831a, U+831d, U+8323, U+8344, U+83d2, U+83f4, U+844d, U+845e, U+846f, U+847b, U+8489, U+84e1, U+84ef, U+8523, U+8526, U+855d, U+85d9, U+85ec, U+8698, U+86da, U+86ef, U+870f, U+8714, U+8740, U+877a, U+8795, U+87a3, U+87d3, U+87fb, U+8836, U+88a5, U+88c0, U+894d, U+8972, U+8997, U+89dc, U+89fc, U+89ff, U+8a5d, U+8a65, U+8a67, U+8a69, U+8a7c, U+8aa5, U+8add, U+8ae5, U+8b31, U+8b5f, U+8b9e, U+8c40, U+8c8d, U+8ca8, U+8cc0, U+8cf2, U+8da7, U+8dc2, U+8dc9, U+8e18, U+8e27, U+8e77, U+8e8d, U+8ed2, U+8f0b, U+8f2a, U+8f8c, U+8f92, U+8fb5, U+8fbc, U+8fcf, U+9059, U+9085, U+9089, U+90de, U+90ea, U+9118, U+9120, U+9136, U+9141, U+917e, U+91a8, U+91b2, U+91c0, U+9207, U+920d, U+923e-923f, U+92ca, U+92fe, U+932b, U+934a, U+93d8, U+9407, U+9483, U+94de, U+94fb, U+94fd, U+9558, U+9597, U+95c0, U+95c4, U+96a4, U+96da, U+96df, U+9727, U+979a, U+97cc, U+97fa, U+980d-980e, U+9828, U+9835, U+984d, U+985d, U+986b-986c, U+98d4, U+9908, U+99a7, U+9a92, U+9aff, U+9b0b, U+9b8d, U+9bbc, U+9be1, U+9cb9, U+9ce3, U+9d03, U+9d23, U+9d26, U+9d3f, U+9d9d, U+9de3, U+9e80, U+9e89-9e8a, U+9ea3-9ea4, U+9eaf, U+9f08, U+9f36, U+9f4b, U+9f4f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.39.woff2) format('woff2');
+ unicode-range: U+4f67, U+63ad, U+67c3, U+6bf9, U+6ca9, U+6cb2, U+7338, U+76dc-76dd, U+7739, U+7756, U+77dd, U+77f0, U+7859, U+78e5, U+78eb, U+794b, U+7966, U+796e, U+799c, U+79a0, U+79ab-79ac, U+7a02, U+7a1b, U+7ada, U+7af6, U+7b16, U+7b27, U+7baf, U+7bbe, U+7be4, U+7bf2, U+7c22, U+7c37, U+7c3b, U+7c4c, U+7c53, U+7c8d, U+7c90, U+7ca6, U+7cad, U+7ce2, U+7cf0, U+7cf5, U+7d03, U+7d16, U+7d29, U+7d35, U+7d59, U+7d8d, U+7e15, U+7e5f, U+7e68, U+7e7a, U+7e84, U+7f4b, U+7f77, U+7fc2, U+7fdc, U+8066, U+80ca, U+811d, U+8130, U+8136, U+81b0, U+81b2, U+8274, U+8283, U+82d8, U+82fd, U+830a, U+83bf, U+83c2, U+83c6, U+83eb, U+8466, U+849e, U+84de, U+84fa, U+8542, U+85a2, U+85a6, U+85be, U+85d7, U+85e0, U+85e7, U+85f7, U+879e, U+8806, U+883b, U+8880, U+8890, U+88b5, U+88ef, U+8931-8932, U+8935, U+8946, U+8971, U+8985, U+898d, U+8a0c, U+8a1b, U+8a2a, U+8a64, U+8a7f, U+8ac4, U+8b53, U+8b5c, U+8b8f, U+8c48, U+8c4e, U+8ce2, U+8cf9, U+8da6, U+8dc5, U+8dca, U+8e06, U+8e3a, U+8e54, U+8ec8, U+8ece, U+8ed0, U+8f6a, U+8ffa, U+9077, U+9087, U+9098, U+9124, U+9133, U+9166, U+91b0, U+91be, U+91db, U+9223, U+9231, U+9236, U+935b, U+9366, U+93cf, U+9435, U+9455, U+945f, U+94b6, U+94d4, U+9533, U+9564-9566, U+959b, U+95af, U+95ba-95bb, U+95d2, U+9659, U+9682, U+96b8, U+972e, U+9733, U+980c, U+9830, U+9846, U+9851, U+986a, U+988b, U+98bc, U+98fc, U+9905, U+9926, U+99d5, U+99dd, U+9a4c, U+9a58, U+9b81, U+9ba8, U+9c20, U+9c39, U+9c63, U+9c97, U+9cbc, U+9d28, U+9d2a, U+9d40, U+9d72, U+9d84, U+9d92, U+9d97, U+9d9c, U+9d9f, U+9de5, U+9de7, U+9df1-9df2, U+9df9, U+9e4d, U+9e53, U+9e96, U+9f44, U+9f4a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.40.woff2) format('woff2');
+ unicode-range: U+74de, U+7706, U+7760, U+7790, U+77ab, U+77c5, U+77ca, U+77d8, U+77da, U+77e1, U+787d, U+7883, U+78ff, U+7908, U+791c, U+7983, U+79d4, U+79f2, U+7a7b, U+7aae, U+7ac4, U+7b17, U+7b87, U+7b98, U+7bbd, U+7c0d, U+7c1c, U+7c42, U+7c50, U+7cb7, U+7d4f, U+7d68, U+7d79, U+7d91, U+7dcc, U+7df7, U+7dfb, U+7e3e, U+7e49, U+7e59, U+7e95, U+7f41, U+7f85, U+7f87, U+7fd0, U+7fef, U+8008, U+800e, U+8063, U+8070, U+8119, U+811b, U+8137, U+813b-813c, U+8157, U+8195, U+81d8, U+81db, U+8250, U+825c, U+8277, U+82d9, U+839a, U+840a, U+8417, U+8458, U+8462, U+8479, U+84c2, U+8525, U+8532, U+858b, U+85cd, U+85d8, U+85dd, U+863f, U+86ec, U+86f7, U+8711, U+8781, U+879a, U+87a4, U+883e, U+8842, U+884b, U+8887, U+888c, U+8894, U+88a6, U+88a8, U+88bf, U+88f2, U+8982, U+8a03, U+8a0b, U+8a15, U+8a1d, U+8a60, U+8a6b-8a6c, U+8a6e, U+8a7b, U+8aa0, U+8ab3, U+8ac6, U+8b2c, U+8b43-8b44, U+8b6f, U+8b7d, U+8bb1, U+8cdc, U+8cf0, U+8d08, U+8dae, U+8e63, U+8e71, U+8ec3, U+8ed9, U+8ee0-8ee2, U+8f29, U+8f5d, U+8fad, U+905c, U+90c0, U+90c8, U+90f5, U+9127, U+912b, U+9137, U+913f-9140, U+91e1-91e2, U+9243, U+9250, U+92b6, U+92d0, U+92f8, U+9310, U+934d-934e, U+9367, U+937c, U+9396, U+93e6, U+9496, U+9575, U+95ad, U+95c3, U+95e2, U+9657, U+967c, U+976d, U+9797, U+97c8, U+97f1, U+9839, U+984e, U+9858, U+9873, U+9901, U+9903, U+9931, U+9935, U+9989, U+99ae, U+99b3, U+99db, U+9a0e, U+9a19, U+9a3a, U+9a4a, U+9a59, U+9aab, U+9ab3, U+9ab9, U+9ae0, U+9ae5, U+9bd9-9bda, U+9c1f, U+9c49, U+9cd2, U+9cdb, U+9d1f, U+9d2e, U+9d32, U+9d37, U+9da1, U+9df7, U+9e00, U+9e8e, U+9ea1, U+9ea7, U+9f30, U+9f92;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.41.woff2) format('woff2');
+ unicode-range: U+54f3, U+589a, U+5c7a, U+640c, U+64d7, U+6957, U+6f24, U+728f, U+76d5, U+76e9, U+76eb, U+76fb, U+7716, U+771c, U+7795, U+77b7, U+77c4, U+77ce, U+77d9, U+781b, U+782e, U+7848, U+78e6, U+790b, U+7928, U+7943, U+7972, U+797b, U+79a2, U+79a5, U+7a06, U+7a2d, U+7a8a, U+7a8c, U+7aaa, U+7abc, U+7acf, U+7b48, U+7b7b, U+7b7d, U+7bf4, U+7bfc, U+7c25, U+7c3c, U+7c44, U+7c46-7c47, U+7c72, U+7cf4, U+7d0f, U+7d7e, U+7d9f, U+7db5, U+7ddc, U+7de0, U+7e22, U+7e4c, U+7e51-7e52, U+7e91, U+7eb4, U+7f48, U+7f75, U+7fda, U+8025, U+8030, U+805c, U+8067, U+807a, U+80a3, U+80bb, U+80d1, U+80d4, U+80fe, U+810e, U+811c, U+8128, U+81bc, U+81ee, U+8223, U+8255, U+8264, U+8267, U+82f2, U+82fc, U+8356, U+836c, U+83bb, U+8483, U+84e8, U+84f5, U+84fe, U+854c, U+8580, U+85c7, U+85e6, U+8640, U+8656-8657, U+8670, U+8688, U+8696, U+86e1, U+86fb, U+870c, U+870e, U+8728, U+875d, U+8779, U+87ff, U+8814, U+8819, U+882d, U+8837, U+887c, U+8897, U+890f, U+8926, U+8939, U+896c, U+8976, U+8990, U+89fd, U+8a1f, U+8a6f, U+8ab4, U+8ad3, U+8b0f, U+8b27, U+8b2a, U+8b41, U+8ca4, U+8d6a, U+8dd8, U+8e16, U+8e2b, U+8e7d, U+8ec6, U+8ec9, U+8edb, U+8f08, U+8f34, U+911b, U+9121, U+9168, U+9191, U+9196, U+92fb, U+9351, U+93aa, U+93c2, U+93c9, U+93d5, U+9430, U+945b, U+95d5, U+96ca, U+97a6-97a7, U+97c2, U+9853, U+98c6, U+98d0, U+994f, U+99f3, U+99f9, U+9a3d, U+9a44, U+9a4e, U+9a8d, U+9afc, U+9b10-9b11, U+9b56, U+9b71, U+9b8b, U+9bb0, U+9bbe, U+9bcb, U+9bcf, U+9c37, U+9cbe, U+9cfe, U+9d10, U+9d27, U+9d3e, U+9d83, U+9dab, U+9db2, U+9ded, U+9e3c, U+9e50, U+9f07, U+9f1e, U+9f24, U+9f46, U+9f5b, U+9f7a, U+9f7d, U+9f91;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.42.woff2) format('woff2');
+ unicode-range: U+570a, U+5776, U+727f, U+76de, U+7705, U+7759, U+77b5, U+77df, U+7863, U+78c8, U+78da, U+78e9, U+78ed, U+78f3, U+78f9, U+7900, U+7931, U+797f, U+79ae, U+79f6, U+7a0c, U+7a43, U+7a6b, U+7a85, U+7a87, U+7abe, U+7af7, U+7b23, U+7b6d, U+7ba3, U+7bc3, U+7c03, U+7c2c, U+7c2f, U+7c3a, U+7c93, U+7cb4, U+7cb6, U+7ce6, U+7d0b, U+7d13, U+7d5e-7d5f, U+7d82, U+7df2, U+7df9-7dfa, U+7e29, U+7e37, U+7e3c, U+7e46, U+7e55, U+7e5a, U+7e73, U+7f37, U+7f4d, U+7fe3, U+805d, U+805f, U+808a, U+8099, U+809e, U+81a5, U+81b1, U+81b4, U+81de, U+81ff, U+824e, U+82b5, U+82c3, U+82f6, U+830d, U+83ed, U+8456, U+849f, U+8573, U+85e3, U+85eb, U+8648, U+8659, U+8692, U+8710, U+872a, U+8755, U+881c, U+8895, U+88cb, U+88d3, U+88e9, U+890c, U+890e, U+896b, U+8988, U+8993, U+89ed, U+8a05-8a06, U+8a0f, U+8a3d, U+8a5f, U+8a68, U+8a6d, U+8a75, U+8a95, U+8aa1, U+8b54, U+8b7b, U+8b88, U+8bc7, U+8c6d, U+8c8e, U+8c91, U+8cbf, U+8cc4, U+8d99, U+8dac, U+8db7, U+8df0-8df1, U+8e25, U+8e4c, U+8e79, U+8e98, U+8f16, U+8f47, U+8f4b, U+8f55, U+8f81, U+8fc6, U+8fd2, U+9015, U+9024, U+90d8, U+9183-9184, U+91bc, U+9230, U+9291, U+92cb, U+92eb, U+9332, U+9354, U+936e, U+9378, U+93c1, U+93e2, U+93e4, U+93ed, U+9404, U+9428, U+9444, U+9463, U+9477, U+947d, U+94f9, U+95da, U+9622, U+9624, U+9638, U+972b, U+978e, U+979d, U+97d7, U+981e, U+9837, U+9909, U+9964, U+99c3, U+99c9, U+9a1b, U+9a20, U+9a61, U+9aea, U+9b16, U+9b1a, U+9b3f, U+9b8c, U+9bc1, U+9bdb, U+9c24, U+9c7b, U+9ce0, U+9cf3, U+9d09, U+9d30, U+9d3c, U+9d42, U+9d9a, U+9da2, U+9db3, U+9dc7, U+9deb, U+9e56, U+9e85, U+9ec7, U+9ecb, U+9ee1, U+9f57, U+9f62-9f63;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.43.woff2) format('woff2');
+ unicode-range: U+5865, U+6f2d, U+76cc, U+76e8, U+76ec, U+76ff, U+770c, U+7782, U+78d1, U+7945, U+79a1, U+79ad, U+79f9, U+7a8e, U+7ba5, U+7c15, U+7c2b, U+7c9b, U+7cbb, U+7cf1, U+7e02, U+7e5e, U+7ee4, U+7f46, U+7f88, U+7fc6, U+7fd1, U+8075, U+8135, U+81c4, U+81d6, U+8322, U+833d, U+8358, U+838a, U+83a2, U+83b5, U+83d5, U+8435, U+84bb, U+84db, U+84f7-84f8, U+850a, U+8518, U+851e, U+8534, U+8558, U+857c, U+8594, U+85d6, U+85e2, U+85f6, U+8601, U+8691, U+86e2, U+87ef, U+8804, U+8808, U+880e, U+8823, U+8825, U+88db, U+896a, U+8999, U+89a5, U+8a11, U+8a23, U+8a52, U+8a70, U+8a78, U+8ab0, U+8acf, U+8adb, U+8aee, U+8af1, U+8b25, U+8b28, U+8b6b, U+8c8b, U+8c9b, U+8cab, U+8cb2, U+8cd3, U+8cde, U+8d01-8d02, U+8d09, U+8da4, U+8daf, U+8db6, U+8dd4, U+8e34, U+8e46, U+8ef7, U+8f1d, U+8f30, U+8f3f, U+8f42, U+9081, U+90bc, U+912e, U+91df-91e0, U+91e3, U+91f1, U+9209, U+9219, U+9234, U+923a, U+9242, U+9254, U+928a, U+9298, U+92a6, U+92c5, U+92e4, U+92ed, U+9303, U+9308, U+9323, U+9328, U+9364, U+938b, U+9394, U+93c6, U+93d0, U+93f1, U+93fb, U+9416, U+9427, U+9433, U+9440, U+9462, U+9471, U+947e, U+9491, U+9543, U+95ac, U+95be-95bf, U+965c-965d, U+96ba, U+9720, U+9724, U+9729, U+976e, U+978f, U+9796, U+97e8, U+97fc-97fd, U+9812, U+9824, U+983a, U+9854, U+985b, U+98f3, U+98f8, U+9906, U+991a, U+9928, U+9945, U+9948, U+995c, U+995f, U+99d0, U+99e1, U+99f7, U+9a01, U+9a2b, U+9a37, U+9a3c, U+9a62, U+9ad5, U+9af4, U+9b5c, U+9bc2, U+9bc5, U+9c2b, U+9c57, U+9c7d, U+9cac, U+9d13, U+9d3b, U+9d86, U+9d8a, U+9db8, U+9df3, U+9dff, U+9e01, U+9e34, U+9e9e, U+9eff, U+9f0a, U+9f0f, U+9f1c, U+9f2b, U+9f66;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.44.woff2) format('woff2');
+ unicode-range: U+51b1, U+57b2, U+5c1c, U+5ddb, U+75c3, U+76e0, U+76f3, U+76fd, U+7703, U+770f, U+772e, U+7745, U+774d, U+7755, U+7767, U+779c, U+7844, U+7894, U+78a0, U+78a6, U+78ad, U+78b8, U+78bd, U+78c3, U+78de, U+78f8, U+78fd, U+7909, U+7918, U+792e, U+793d, U+7958, U+797e, U+798c, U+79a4, U+79cc, U+79d9, U+79e2, U+7a27, U+7a2c, U+7a32, U+7a38, U+7a5c, U+7ad2, U+7b00, U+7b65, U+7b76, U+7bec-7bed, U+7c18, U+7c34, U+7c52, U+7c54, U+7c5c, U+7c5e, U+7c63, U+7c76, U+7cc2, U+7cc9, U+7d23, U+7d4d, U+7da1, U+7db6, U+7dc4, U+7dd7, U+7dfc, U+7e01, U+7e06, U+7e0b, U+7e1c, U+7e1e, U+7e40, U+7e43, U+7e64, U+7e67, U+7e6c, U+7e83, U+7e89, U+7e92, U+7e97, U+7f6f, U+7f80, U+7f95, U+7fb5, U+8007, U+8034, U+806b, U+808d, U+8117, U+8143, U+8163, U+8168, U+8175, U+8197, U+819f, U+81ef, U+8226, U+8241-8242, U+824a, U+831e, U+83c4, U+8468, U+847e, U+8484, U+8488, U+8495, U+8498, U+84a7, U+84ad, U+84c3, U+84c6, U+84f3, U+8531, U+8541, U+8582, U+85d1, U+85ef, U+8614, U+8618, U+8706, U+8791, U+87e8, U+87fc, U+882a, U+885f, U+8911, U+8920, U+8956, U+8987, U+8a10, U+8a14, U+8a56-8a57, U+8a6a, U+8a87, U+8ac8, U+8ad1, U+8b1f, U+8b8c, U+8b99, U+8c3d, U+8c57, U+8c77, U+8c97, U+8ca3, U+8cef, U+8d0b, U+8d72, U+8e28, U+8e89, U+8eb1, U+8f00, U+8f17, U+8f53, U+8f77, U+8fcb, U+9013, U+913a, U+9173, U+91b1, U+91d4, U+922a, U+929d, U+92d5, U+9373, U+939a, U+9410, U+9434, U+9475, U+96a9, U+96d1, U+9718, U+9784, U+97c6, U+98ba, U+98ee, U+98f0, U+9907, U+9950, U+99bb, U+99de, U+9a27, U+9afd, U+9b36, U+9b63, U+9bc0, U+9bf5-9bf6, U+9c27, U+9c30, U+9c42, U+9cc2, U+9ccb, U+9d1c, U+9d39, U+9d5f, U+9e52, U+9f2a, U+9f94;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.45.woff2) format('woff2');
+ unicode-range: U+578c, U+600a, U+76d3, U+7715, U+7723, U+774e, U+7758, U+7769, U+77a3, U+77c0, U+77c2, U+77f5, U+77fa, U+782a, U+7842, U+784a, U+7885, U+7892, U+78e3, U+78ea, U+7912, U+7964, U+7994, U+799e, U+79a9, U+79e0, U+7a11, U+7a44, U+7a50, U+7a59, U+7a5b, U+7a6f, U+7a71, U+7a75, U+7aaf, U+7ac2, U+7ae2, U+7b09, U+7b0d, U+7b69, U+7bdb, U+7bf3, U+7c11, U+7c20, U+7c83, U+7c96, U+7cd3, U+7cfa, U+7d2d, U+7d3e, U+7d6d, U+7d76, U+7d85, U+7dc5, U+7dcd, U+7e42, U+7e4b, U+7e63, U+7f47, U+7f59, U+7f65, U+7f7c, U+7f97, U+7f9c, U+7fed, U+8011, U+802e, U+8078, U+80b8, U+80f9, U+8123, U+816c, U+8184, U+8186, U+818b, U+81aa, U+81d5, U+8203, U+8252, U+826b, U+826d, U+8276, U+827c, U+833f, U+8362, U+8373, U+8382, U+841a, U+84d7, U+84f1, U+854b, U+855f, U+8583, U+8590, U+85a0, U+85fa, U+8613, U+862a, U+8675, U+86be, U+86d6, U+86dc, U+874d, U+8768, U+87c2, U+87dc, U+880f, U+8855, U+8858, U+889f, U+88ac, U+895b, U+8abe, U+8b45, U+8b4c, U+8b78, U+8b9c, U+8c3b, U+8c60, U+8cda, U+8d9d, U+8da1, U+8dfe, U+8e00, U+8e38, U+8e4e, U+8e61, U+8e73, U+8e9b, U+8ea9, U+8eb6, U+8ecf, U+8eec, U+8f35, U+8f57, U+8f65, U+8fa2, U+9037, U+9048, U+908c, U+911f, U+918e, U+91bb, U+91ed, U+9238, U+928c, U+92c2, U+92ce, U+9350, U+93b4, U+93b8, U+940d, U+9458, U+946e, U+9594, U+95cd, U+96cb, U+9723, U+9743, U+97cd, U+9833, U+98a9, U+98e6, U+9914, U+99cb, U+9a04, U+9a48, U+9aa9, U+9abb, U+9abe, U+9af2, U+9b19, U+9b3d, U+9b6b, U+9b73, U+9bc8, U+9be9, U+9bec, U+9c0c, U+9c6e, U+9c93, U+9d02, U+9d44, U+9d6c, U+9d8d, U+9da0, U+9dc1, U+9dd6, U+9e07, U+9e18, U+9e27, U+9e59, U+9e8f, U+9eb0, U+9eee, U+9f04-9f05, U+9f16, U+9f6f, U+9f93;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.46.woff2) format('woff2');
+ unicode-range: U+7640, U+76ea, U+7700, U+7732, U+774b, U+77c3, U+77d2, U+782b, U+785f, U+7880, U+78a9, U+78c4, U+7902, U+7907, U+790a, U+7959, U+7970, U+7973, U+7979, U+7990, U+79aa, U+79f3, U+79fc, U+7a04, U+7a07-7a08, U+7a18-7a19, U+7a62, U+7af8, U+7afe, U+7b10, U+7b1c, U+7b42, U+7b63, U+7b8f, U+7b92, U+7bdf, U+7bfa, U+7ca7, U+7ce7, U+7d02, U+7d10, U+7d33, U+7d3b, U+7d80, U+7db9, U+7dd0, U+7df1, U+7e08, U+7e56, U+7e6f, U+7e74, U+7e80, U+7f3e, U+7f89, U+7fad, U+7fb7, U+7fc8, U+800a, U+8021, U+8140, U+8142, U+81d7, U+81da, U+824d, U+8269, U+82c5, U+8381, U+83de, U+83f3, U+8408, U+844f, U+8481, U+8491, U+84d4-84d5, U+8519, U+853f, U+8563, U+8567, U+8586, U+8597, U+859d, U+85c0, U+860c, U+864b, U+86bf, U+872b, U+873d, U+8744, U+87a5, U+8805, U+881a, U+8878, U+88bd, U+88f6, U+88fa, U+8923, U+8938, U+89d3, U+8a45, U+8a47, U+8a50, U+8a5b, U+8abb, U+8abd, U+8ac2, U+8ae7, U+8b1a, U+8b21, U+8c67, U+8cae, U+8cc2, U+8ce1, U+8cf1, U+8d51, U+8d79, U+8d7d, U+8db9, U+8e03, U+8e5e, U+8e67, U+8ebb, U+8ebf, U+8f27, U+8f3b, U+8f3d, U+90df, U+910d, U+9111, U+917c, U+9181, U+9195, U+91a5, U+91e6, U+91ea, U+9215, U+9221, U+9235, U+9292, U+9299, U+92fa, U+9317, U+9325, U+9353, U+935f, U+938d, U+9398, U+93cd, U+93fd, U+93ff, U+940e, U+9424, U+9432, U+943f, U+944a, U+9527, U+958f, U+95a7, U+95db, U+969d, U+96a5-96a6, U+9744, U+9771, U+97aa, U+97ba, U+97bf, U+97df, U+9840, U+98b1, U+98c0, U+98e5, U+98ea, U+9912, U+9946, U+995d, U+99bf, U+9a07, U+9a66, U+9ac9, U+9acf, U+9b09, U+9b38, U+9b5b, U+9cf7, U+9d4b, U+9d4f, U+9d68, U+9d7c, U+9df5, U+9dfc, U+9e0d, U+9e13, U+9e16, U+9e60, U+9ef6, U+9f09, U+9f70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.47.woff2) format('woff2');
+ unicode-range: U+7b9b, U+7b9e, U+7ba4, U+7bb7, U+7bb9, U+7bbf, U+7bdc, U+7c1e, U+7c24, U+7c28, U+7c39, U+7c3d, U+7c6c, U+7c94, U+7cb8, U+7d07, U+7d1d, U+7d3a, U+7d46, U+7d73, U+7d84, U+7d8a, U+7d8f, U+7d92, U+7d94, U+7d97, U+7db4, U+7ddd-7dde, U+7de6, U+7df0, U+7df6, U+7e23, U+7e39, U+7e5c-7e5d, U+7e69, U+7e8f, U+7f43, U+7f5d, U+7f70, U+7fb4, U+7fe2, U+8061, U+8079, U+807b, U+807e, U+8115, U+811f, U+8133, U+813d, U+813f, U+81c8, U+8251, U+8259, U+8262, U+82bb, U+833b, U+834a, U+83d0, U+83d3, U+83d9-83da, U+83e3, U+83e6, U+83e8, U+8454, U+8460, U+846e, U+8472, U+84d9, U+8501, U+855b-855c, U+8566, U+8575, U+8577, U+8596, U+85e8, U+85ee, U+85f0, U+85f3, U+85f5, U+8643, U+8658, U+865c-865d, U+86e5, U+86f6, U+8720, U+8778, U+8790, U+8796, U+87a1-87a2, U+87f3, U+880c-880d, U+8812, U+8817, U+881d, U+881f, U+8898, U+891c, U+8928, U+897e, U+898a, U+899a-899b, U+899f-89a0, U+89af, U+8a1c, U+8a21, U+8a2e, U+8a3c, U+8a77, U+8a7a, U+8ac9, U+8ad2, U+8ad8, U+8ae6, U+8afa, U+8b00, U+8b20, U+8b29, U+8b38, U+8b3d, U+8b8d, U+8b9b, U+8ca6, U+8cb8, U+8cbd, U+8cc5, U+8cca, U+8cf3, U+8cfa, U+8d00, U+8d04, U+8d0a, U+8d0c, U+8daa, U+8dc1, U+8dc8, U+8dd2, U+8e56, U+8ec0, U+8ec7, U+8ed4, U+8ed8, U+8ee3, U+8efb, U+8f12, U+8f25-8f26, U+8f5f, U+9007, U+9094, U+90a5, U+90ab, U+913d, U+9186, U+919e, U+91bd, U+91e5, U+9202, U+923d, U+924d, U+925b, U+9293, U+929c, U+92c7, U+92d2, U+92f0, U+92f7, U+9320, U+9326, U+93b2, U+93c8, U+93df, U+9411, U+942c, U+9472, U+9474, U+947f, U+957b, U+9591, U+95b0, U+95b3-95b4, U+95b9, U+95cc, U+95e1, U+966e, U+967b, U+9702, U+9775, U+978a, U+979b, U+97d3;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.48.woff2) format('woff2');
+ unicode-range: U+5c8d, U+72e8, U+771e, U+7749, U+7774, U+778f, U+77a1, U+780f, U+7824, U+78b5, U+78ef, U+7910-7911, U+7976, U+7996-7997, U+79b0, U+79b5, U+79c5, U+7a21, U+7a34, U+7a7d, U+7aa4, U+7ac8, U+7acc, U+7ae4, U+7b32, U+7b3f, U+7c59, U+7cb5, U+7cbf, U+7d18, U+7d52-7d53, U+7dcb, U+7e2a, U+7e8d, U+7ed7, U+7fa0, U+7fd6, U+7ff8, U+8076, U+80a7, U+81f6, U+820b, U+8263, U+82bc, U+836e, U+8422, U+844b, U+84e7, U+8504, U+8552, U+85ad, U+8672, U+86a1, U+8738, U+87a6, U+8829, U+89b5, U+8a39, U+8a3b, U+8a40, U+8a44, U+8aac, U+8ae0, U+8b57, U+8c4a, U+8cc1, U+8d8c, U+8db0, U+8e04, U+8ea6, U+8ee7, U+8f02, U+8f10, U+8f18, U+8f28, U+9076, U+908f, U+9206, U+9216, U+927c, U+9285, U+92ea, U+930b, U+9365, U+9387, U+939d, U+9429, U+9437, U+9470, U+95bd, U+95df, U+96a3, U+96b2, U+96d8, U+971d, U+979f, U+97bb, U+97ee, U+97f4, U+97f7, U+980a-980b, U+9813, U+981c, U+9855, U+9868, U+9874, U+98b5, U+98f7, U+98fa, U+98fe, U+9900, U+990c, U+9913, U+993c, U+994c, U+9952, U+9961, U+9973, U+997b, U+99b4, U+99dc, U+99e3, U+99e5, U+99e8, U+99f6, U+9a0d, U+9a23, U+9a30, U+9a3f, U+9a41-9a42, U+9a47, U+9a51, U+9a55-9a56, U+9a5b, U+9a65, U+9abf, U+9ade, U+9ae7, U+9b00, U+9b04-9b05, U+9b22, U+9b27, U+9b70, U+9b75, U+9b78, U+9b7a, U+9bca, U+9bd0, U+9bd3, U+9bd6-9bd8, U+9bfd, U+9c1e, U+9c2c, U+9c35, U+9c38, U+9c3b, U+9c4c, U+9c7a, U+9ce9-9cea, U+9cf6, U+9cff, U+9d22, U+9d2d, U+9d33-9d35, U+9d3a, U+9d3d, U+9d41, U+9d5d, U+9d88, U+9d90, U+9d93, U+9da9, U+9db4, U+9dd8, U+9de9, U+9df4, U+9dfd, U+9ea9, U+9eb5, U+9efa, U+9f11, U+9f18, U+9f25, U+9f2e, U+9f72, U+9f7c, U+9f8e, U+9f9d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 400;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/400/f9b5868096a2c61f7b8ec1acee748961.49.woff2) format('woff2');
+ unicode-range: U+76c9, U+76e2, U+7718, U+7771, U+777b, U+779e, U+78e0, U+7924, U+793f, U+7969, U+79a8, U+79fa, U+7a5f, U+7aab, U+7b0e, U+7b8b, U+7be8, U+7c4b, U+7cee, U+7d63, U+7de4, U+7df5, U+7e00, U+7e1a-7e1b, U+7e27, U+7e7f, U+7f99, U+7fae, U+80b0, U+8278, U+8359, U+8395, U+8399, U+8447, U+845f, U+84aa, U+8602, U+873c, U+8751, U+87a0, U+87a7, U+87c5, U+87e2, U+87e7, U+894c, U+8958, U+897d, U+8a1e, U+8b04, U+8c3c, U+8c70, U+8c92, U+8cf7, U+8e92, U+8ead, U+8fcd, U+91ff, U+927d, U+92ab, U+92b2, U+9327, U+935a, U+9371, U+93f8, U+946a, U+95a2, U+9777, U+9826, U+98bb, U+991f, U+992b, U+993d, U+9a0a, U+9a46, U+9a94, U+9aa3, U+9b33, U+9b52, U+9b7d, U+9b7f, U+9b85, U+9b87, U+9b8e, U+9b98, U+9baa, U+9bad, U+9be8, U+9c3f-9c40, U+9c44, U+9c53, U+9c96, U+9d12, U+9d19, U+9d1e, U+9d63, U+9d6a, U+9de6, U+9dfa, U+9f5c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.0.woff2) format('woff2');
+ unicode-range: U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e16, U+4e1a, U+4e1c, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e48, U+4e4b, U+4e5f, U+4e86, U+4e8b-4e8c, U+4e8e, U+4e9b, U+4ea7, U+4eba, U+4ec0, U+4ece, U+4ed6, U+4ee3, U+4ee5, U+4eec, U+4efb, U+4f1a, U+4f46, U+4f4d, U+4f53, U+4f5c, U+4f60, U+4f7f, U+4fe1, U+513f, U+5148, U+5168, U+516c, U+5173, U+5176, U+5185, U+519b, U+51fa, U+5206, U+5229, U+5230, U+5236, U+524d, U+529b, U+52a0, U+52a8, U+5316, U+5341, U+539f, U+53bb, U+53c8, U+53ca, U+53d1, U+53ea, U+53ef, U+5408, U+540c, U+540e, U+5411, U+5458, U+548c, U+56de, U+56e0, U+56fd, U+5728, U+5730, U+58f0, U+5916, U+591a, U+5927, U+5929, U+5934, U+5979, U+597d, U+5982, U+5b50, U+5b66, U+5b83, U+5b9a, U+5b9e, U+5bb6, U+5bf9, U+5c06, U+5c0f, U+5c31, U+5de5, U+5df1-5df2, U+5e38, U+5e74, U+5e76, U+5e94, U+5ea6, U+5f00, U+5f53, U+5f88, U+5f97, U+5fc3, U+6027, U+60c5, U+60f3, U+610f, U+6210-6211, U+6216, U+6218, U+6240, U+624b, U+628a, U+63d0, U+653f, U+6559, U+6587, U+65af-65b0, U+65b9, U+65e0, U+65e5, U+65f6, U+660e, U+662f, U+6700, U+6708-6709, U+672c, U+673a, U+6765, U+679c, U+6837, U+6b21, U+6b63-6b64, U+6bd4, U+6c11, U+6ca1, U+6cd5, U+6d77, U+70b9, U+7136, U+7269, U+7279, U+73b0, U+7406, U+751f, U+7528, U+7531, U+7684, U+76f8, U+770b, U+7740, U+77e5, U+79cd, U+7acb, U+7b2c, U+7b49, U+7ecf, U+7ed9, U+7f8e, U+8001, U+8005, U+800c, U+80fd, U+81ea, U+884c, U+8868, U+88ab, U+897f, U+8981, U+89c1, U+8bdd, U+8bf4, U+8d77, U+8eab, U+8fc7, U+8fd8-8fd9, U+8fdb, U+901a, U+9053, U+90a3, U+90e8, U+90fd, U+91cc-91cd, U+957f, U+95e8, U+95ee, U+95f4, U+9762, U+9ad8;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.1.woff2) format('woff2');
+ unicode-range: U+4e07, U+4e14, U+4e49, U+4e66, U+4e89, U+4e94, U+4ea4, U+4eb2, U+4eca, U+4ee4, U+4ef6, U+4f20, U+4f4f, U+4f55, U+4fbf, U+4fdd, U+5019, U+505a, U+50cf, U+5143, U+5149, U+514b, U+5165, U+5171, U+5175, U+5177, U+518d, U+51b3, U+51c6, U+51e0, U+51fb, U+5207, U+5219, U+522b, U+529e, U+52a1, U+5317, U+533a, U+5355, U+5357, U+5373-5374, U+53cd, U+53d6-53d8, U+53e3, U+53eb, U+53f0, U+53f8, U+5404, U+540d, U+542c, U+544a, U+5462, U+547d, U+54c1, U+56db, U+573a, U+57fa, U+58eb, U+5904, U+5907, U+592a-592b, U+5931, U+5973, U+59cb, U+5b57-5b58, U+5b89, U+5b8c, U+5bfc, U+5c11, U+5c14, U+5c55, U+5c71, U+5e02-5e03, U+5e08, U+5e26, U+5e72-5e73, U+5efa, U+5f0f, U+5f20, U+5f3a, U+5f62, U+5f71, U+5f80, U+5fb7, U+5fc5, U+5feb, U+600e, U+601d, U+603b, U+611f, U+624d, U+6253, U+62a5, U+62c9, U+6301, U+6307, U+636e, U+63a5, U+6536, U+6539, U+653e, U+6570, U+66f4, U+670d, U+671b, U+671f, U+672a, U+672f, U+6743, U+6761, U+6781, U+6797, U+6839, U+683c, U+6b65, U+6b7b, U+6bcf, U+6c14, U+6c34, U+6c42, U+6cbb, U+6d3b, U+6d41, U+6d4e, U+6e05, U+7231, U+738b, U+7535, U+754c, U+767d, U+76ee, U+76f4, U+771f, U+773c, U+786e, U+793e, U+795e, U+79d1, U+7a0b, U+7a7a, U+7b11, U+7ba1, U+7c7b, U+7cfb, U+7ec4, U+7ed3, U+7edf, U+7f57, U+8054, U+81f3, U+8272, U+82f1, U+89c2, U+89c4, U+89c9, U+89e3, U+8a00, U+8ba1, U+8ba4, U+8ba9, U+8bae, U+8bb0, U+8bb8, U+8bba, U+8bbe, U+8bc1, U+8bc6, U+8be5, U+8c03, U+8c61, U+8d44, U+8d70, U+8def, U+8f66, U+8f6c, U+8fb9, U+8fbe, U+8fd0-8fd1, U+8fdc, U+8fde, U+9020, U+91cf, U+91d1, U+961f, U+9662, U+96be, U+975e, U+9886, U+9898, U+98ce, U+98de, U+9a6c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.2.woff2) format('woff2');
+ unicode-range: U+4e03, U+4e13, U+4e25, U+4e3e, U+4e4e, U+4e5d, U+4e9a, U+4eac, U+4ec5, U+4ef7, U+4f01, U+4f17, U+4f3c, U+4f4e, U+4f8b, U+4f9b, U+4f9d, U+503c, U+515a, U+516b, U+516d, U+5174, U+5199, U+519c, U+51b5, U+5212, U+5217, U+529f, U+52bf, U+5305, U+533b, U+5343, U+534a, U+534e, U+5386, U+53c2, U+53cb-53cc, U+53e4, U+53e6, U+53f2, U+53f7, U+5403, U+5417, U+5427, U+5468, U+54cd, U+5546, U+5668, U+56e2, U+56f4, U+56fe, U+571f, U+578b, U+57ce, U+5883, U+589e, U+590d, U+591f, U+5947, U+59d4, U+5b69, U+5b98, U+5ba2, U+5bb3, U+5bb9, U+5bc6, U+5bdf, U+5c3d, U+5c40, U+5df4, U+5e0c, U+5e7f, U+5e95, U+5e9c, U+5f15, U+5f8b, U+5fd7, U+5ff5, U+6001, U+606f, U+613f, U+623f, U+6279, U+627e, U+6280, U+6295, U+62a4, U+6309, U+63a8, U+652f, U+653b, U+6545, U+6548, U+654c, U+6574, U+6597, U+6599, U+65ad, U+65bd, U+65cf, U+65e9, U+6613, U+661f, U+663e, U+66fe, U+671d, U+6740, U+674e, U+6784, U+67d0, U+67e5, U+6807, U+6848, U+6b62, U+6b66, U+6bb5, U+6bcd, U+6c5f, U+6cb3, U+6ce8, U+6d3e, U+6d88, U+6df1, U+6ee1, U+706b, U+7167, U+7236, U+7247, U+7559, U+75c5, U+767e, U+77f3, U+7814, U+793a, U+79bb, U+79f0, U+7a76, U+7a81, U+7ad9, U+7ae0, U+7b54, U+7b97, U+7c73, U+7cbe, U+7d27, U+7ea2, U+7ea6-7ea7, U+7eaa, U+7ebf, U+7ec6-7ec8, U+7edd, U+7eed, U+7ef4, U+7fa4, U+8003, U+81f4, U+8282, U+82b1, U+82cf, U+8425, U+843d, U+867d, U+88c5, U+89c6, U+8bb2, U+8bc9, U+8bed, U+8bf7, U+8c08, U+8d23, U+8d28, U+8d39, U+8d8a, U+8db3, U+8ddf, U+8f7b, U+8f83, U+9009, U+91c7, U+9632, U+963f, U+9645, U+9648, U+9664, U+968f, U+96c6, U+9700, U+9752, U+9769, U+97f3, U+9879, U+987b, U+9996, U+9a8c, U+9ec4, U+9ed1;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.3.woff2) format('woff2');
+ unicode-range: U+4e45, U+4e50, U+4e60, U+4e70-4e71, U+4e91, U+4ecd, U+4efd, U+4f0a, U+4f18, U+4f24, U+4f59, U+4f5b, U+4fee, U+5012, U+5047, U+505c, U+5145, U+514d, U+5170, U+517b, U+51b2, U+51b7, U+5218, U+521a-521b, U+521d, U+5224, U+523b, U+526f, U+52a9, U+52b3, U+534f, U+5360-5361, U+536b, U+5370, U+538b, U+53e5, U+53f3, U+5426, U+54c8, U+54ea, U+554a, U+5584, U+559c, U+5750, U+5757, U+575a, U+591c, U+592e, U+5988, U+5a01, U+5b88, U+5b97, U+5ba1, U+5ba3-5ba4, U+5bcc, U+5c04, U+5c3c, U+5c42, U+5c45, U+5c5e, U+5c81, U+5c9b, U+5dde, U+5de6, U+5dee, U+5e1d, U+5e2e, U+5f02, U+5f39, U+5f81, U+5f85, U+5fae, U+6000, U+6015, U+6025, U+602a, U+6076, U+60a8, U+60ca, U+6258, U+6267, U+627f, U+6297, U+62c5, U+62ff, U+6325, U+6392, U+63a7, U+6562, U+65e2, U+665a, U+666e, U+6728, U+6751, U+6811, U+6821, U+68c0, U+6982, U+6a21, U+6b22, U+6bdb, U+6c49, U+6c89, U+6ce2, U+6d32, U+6e38, U+6e90, U+6f14, U+6fc0, U+7075, U+70ed, U+72af, U+72b6, U+72ec, U+7387, U+73af, U+7403, U+751a, U+7530, U+7537, U+7565, U+7591, U+75db, U+7687, U+76ae, U+76ca, U+7701, U+7834, U+798f, U+79ef, U+7a0e, U+7a7f, U+7adf, U+7b56, U+7b80, U+7d20, U+7eb3, U+7ee7, U+7f51, U+7f6a, U+7f6e, U+804c, U+80a1, U+80b2, U+80cc, U+80dc, U+8111, U+811a, U+8138, U+822a, U+822c, U+8239, U+827a, U+82e5-82e6, U+8303, U+8349, U+836f, U+83b7, U+8457, U+8840, U+8863, U+89d2, U+8b66, U+8bd5, U+8bfb, U+8c01, U+8d1f, U+8d22, U+8d85, U+8ff0, U+8ffd, U+9000-9002, U+901f, U+914d, U+9152, U+94b1, U+94c1, U+94f6, U+9519, U+9633, U+9635-9636, U+9646, U+964d, U+9650, U+9669, U+96f7, U+9759, U+987f, U+9884, U+98df, U+9999, U+9f99;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.4.woff2) format('woff2');
+ unicode-range: U+4e34, U+4e3d, U+4e61, U+4e88, U+4e92, U+4ea1, U+4ea6, U+4eae, U+4ecb, U+4ed8, U+4f26, U+4f2f, U+4fc4, U+501f, U+5065, U+51cf, U+5251, U+5267, U+52d2, U+5347, U+5356, U+535a, U+5371, U+5382, U+53bf, U+53f6, U+5409, U+541b, U+542b, U+5438, U+5440, U+5473, U+547c, U+54e5, U+5510, U+559d, U+56ed, U+56f0, U+56fa, U+5723, U+5747, U+574f, U+57df, U+5802, U+5965, U+5987, U+59d0-59d1, U+5a18, U+5a5a, U+5b59, U+5b8b, U+5b9d, U+5bab, U+5bfb, U+5c01, U+5c1a, U+5c4b, U+5cb8, U+5de8, U+5e2d, U+5e78, U+5e8f, U+5ea7, U+5ead, U+5eb7, U+5f1f, U+5f52, U+5f55, U+5fd9, U+5ffd, U+6050, U+6069, U+6162, U+6237, U+6293, U+62db, U+62e9, U+62ec, U+635f, U+6362, U+6388-6389, U+638c, U+63a2, U+6447, U+6551, U+6563, U+65c1, U+65c5, U+65e7, U+6625, U+666f, U+667a, U+6697, U+670b, U+6742, U+6750, U+675f, U+677e-677f, U+67aa, U+67b6, U+6838, U+68a6, U+695a, U+697c, U+6b27, U+6b3e, U+6bd2, U+6beb, U+6c38, U+6c99, U+6cb9, U+6cfd, U+6d0b, U+6d1b, U+6d4b, U+6e10, U+6e29, U+6e2f, U+6e56, U+6e7e, U+706d, U+70ae, U+70b8, U+70c8, U+70df, U+7248, U+7259, U+73ed, U+753b, U+7597, U+767b, U+76d1, U+775b, U+7761, U+7763, U+77ed, U+793c, U+7968, U+7981, U+79d8, U+79fb, U+7aef, U+7b14, U+7d22, U+7f16, U+7f3a, U+8033, U+80af, U+80e1, U+8131, U+8230, U+826f, U+8363, U+83ab, U+85cf, U+8651, U+8865, U+8ba8, U+8bc4, U+8bcd, U+8bd7, U+8bef, U+8bfa, U+8c0b, U+8c13, U+8c22, U+8d25, U+8d27, U+8d35, U+8d76, U+8dd1, U+8df3, U+8f7d, U+8f93, U+9003, U+9010, U+9047, U+9057, U+907f, U+91ca, U+91ce, U+949f, U+9500, U+95fb, U+9634, U+9644, U+96e8, U+9732, U+9760, U+9876, U+987a, U+987e, U+989d, U+996d, U+9c7c, U+9c81, U+9c9c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.5.woff2) format('woff2');
+ unicode-range: U+4e01, U+4e1d, U+4e30, U+4e43, U+4ebf, U+4f11, U+4f19, U+4f1f, U+4f38, U+4fb5, U+4fc3, U+5144, U+5178, U+51b0, U+51e1, U+5200, U+5211, U+523a, U+52aa, U+5348, U+5377, U+5434, U+54f2, U+552e-552f, U+5566, U+558a, U+5634, U+5706, U+5766, U+57c3, U+57f9, U+5854, U+585e, U+590f, U+593a, U+5957, U+59b9, U+59bb, U+59c6, U+59d3, U+5b81, U+5b87, U+5bbd, U+5c0a, U+5c24, U+5ddd, U+5e01, U+5e84, U+5e8a, U+5e93, U+5e97, U+5ef6, U+5f03-5f04, U+5f31, U+5f69, U+5f92, U+5fcd, U+5fd8, U+6012, U+60b2, U+620f, U+6269, U+626c, U+6298, U+62b1, U+62b5, U+62bd, U+62cd, U+62e5, U+632f, U+63aa, U+63e1, U+63f4, U+641e, U+6446, U+6469, U+64cd, U+66b4, U+66f2, U+66ff, U+672b, U+6731, U+6768, U+6770, U+6790, U+67d3, U+684c, U+6885, U+68ee, U+690d, U+6b32, U+6b4c, U+6b8a-6b8b, U+6bc1, U+6bd5, U+6c47, U+6c7d, U+6cbf, U+6d1e, U+6d6a, U+6df7, U+6f5c, U+706f, U+719f, U+7237-7238, U+725b, U+72c2, U+731b, U+732e, U+7389, U+73a9, U+74e6, U+7532-7533, U+76d6, U+76d8, U+76db, U+76df, U+7840, U+786c, U+7956, U+79c0-79c1, U+79cb, U+7a33, U+7a97, U+7ade, U+7b51, U+7bc7, U+7eaf, U+7eb7-7eb8, U+7ec3, U+7edc, U+7eff, U+7f13, U+7ffb, U+8036, U+8089, U+81e3, U+821e, U+83b1, U+8428, U+848b, U+8499, U+84dd, U+864e, U+865a, U+8857, U+8ba2, U+8bad, U+8bbf, U+8bd1, U+8bda, U+8bf8, U+8c37, U+8d1d, U+8d2d, U+8d38, U+8d5b, U+8d5e, U+8d75, U+8da3, U+8f6e-8f6f, U+8fc5, U+8fce, U+8fdd, U+8feb, U+8ff7, U+8ff9, U+900f, U+9014, U+904d, U+906d, U+90d1, U+9192, U+9488, U+9547, U+95ea, U+963b, U+9690, U+96c4-96c5, U+96ea, U+9707, U+9875, U+9986, U+9aa8, U+9b3c, U+9b54, U+9ea6, U+9ebb, U+9ed8, U+9f13, U+9f50;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.6.woff2) format('woff2');
+ unicode-range: U+4e08, U+4e39, U+4e4c, U+4e4f, U+4e58, U+4eab, U+4ec1, U+4ed9, U+4eea, U+4ef0, U+4eff, U+4f0f, U+4f30, U+4f34, U+4fa0, U+4fa7, U+4fd7, U+500d, U+503a, U+503e, U+504f, U+5076-5077, U+507f, U+5192, U+51ac, U+51c0, U+51f6, U+520a, U+52b2, U+52c7, U+5385, U+5389, U+539a, U+53ec, U+53f9, U+542f, U+5439, U+5446, U+54b1, U+54ed, U+5531, U+5708, U+5806, U+5899, U+58c1, U+5949, U+594b, U+5954, U+5956, U+5976, U+5999, U+5a46, U+5b54, U+5b63-5b64, U+5b9c, U+5bd2, U+5c16, U+5c3e, U+5de7, U+5e55, U+5e86, U+5e9f, U+5f17, U+5f79, U+5f7b-5f7c, U+5f84, U+5f90, U+5fa1, U+5fc6, U+5fe0, U+6062, U+6068, U+6070, U+60a3, U+60ef, U+6108, U+61c2, U+6234, U+62ac, U+62d2, U+62dc, U+6302, U+6311, U+6355, U+63cf, U+6478, U+64a4, U+64ad, U+656c, U+65cb, U+65e6, U+6620, U+6653, U+6668, U+6682, U+66fc, U+6717, U+675c, U+676f, U+6865, U+6a2a, U+6cdb, U+6cea, U+6cf0, U+6d17, U+6d25, U+6d2a, U+6d89, U+6da6, U+6de1, U+6f6e, U+7070, U+707e, U+708e, U+70e6-70e7, U+7206, U+724c, U+72b9, U+72d7, U+739b, U+73cd, U+73e0, U+745e, U+75be, U+75c7, U+76fe, U+77ff, U+7801, U+78b0, U+79df, U+79e6, U+7a0d, U+7a77, U+7ae5, U+7b26, U+7b7e, U+7cae, U+7cca, U+7d2f, U+7e41, U+7eb5, U+7ecd, U+7f18, U+7f29, U+7f5a, U+7f62, U+7f72, U+7f8a, U+7ffc, U+805a, U+80c6, U+80de, U+80f8, U+817f, U+820d, U+8247, U+827e, U+8336, U+8352, U+83dc, U+866b, U+86cb, U+878d, U+8861, U+888b, U+88ad, U+88c1-88c2, U+89e6, U+8baf, U+8bfe, U+8d2b, U+8d56, U+8d6b, U+8ddd, U+8f70, U+8f86, U+8f91, U+8fa9, U+8fdf, U+90a6, U+955c, U+95ed, U+95f9, U+9677, U+9686, U+9694, U+969c, U+96f6, U+97e9, U+9a7b, U+9a91, U+9b42, U+9e1f, U+9e21, U+9f3b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.7.woff2) format('woff2');
+ unicode-range: U+4e27, U+4e54, U+4e95, U+4ec7, U+4ed4, U+4f0d, U+4f2a, U+4f69, U+4f73, U+4fa6, U+4fe9, U+50a8, U+5141, U+517c, U+518c, U+51c9, U+51e4, U+51ed, U+51ef, U+5238, U+5242, U+5269, U+529d, U+52b1, U+52c3, U+52e4, U+53d4, U+5413, U+5448, U+5761, U+5782, U+5821, U+58a8, U+58ee, U+594f, U+5974, U+5a1c, U+5a92, U+5b5f, U+5b99, U+5baa, U+5bbe, U+5c38, U+5c3a, U+5c4a, U+5ca9, U+5cf0, U+5d07, U+5de1, U+5e15, U+5e45, U+5e7b-5e7c, U+5f6d, U+5fe7, U+601c, U+604b, U+6084, U+6089, U+60d1, U+60dc, U+60e0, U+60e8, U+6124, U+6148, U+6167, U+6212, U+622a, U+624e, U+6251, U+626b, U+6270, U+62a2, U+62d4, U+62d6, U+62df, U+633a, U+63a9, U+63d2, U+641c, U+6444, U+6492, U+649e, U+654f, U+65d7, U+660f, U+6628, U+66f9, U+6735, U+679d, U+67cf, U+67d4, U+67f3, U+6851, U+6881, U+6b23, U+6b96, U+6bbf, U+6c0f, U+6c57, U+6c61, U+6ce5, U+6d01, U+6d53, U+6d6e, U+6db2, U+6e21, U+6ed1, U+6eda, U+6f02, U+6f2b, U+7126, U+71c3, U+722c, U+7267, U+7272, U+72f1, U+731c, U+7518, U+756a, U+75af, U+7686, U+7709, U+77a7, U+77db, U+788d-788e, U+78e8, U+7a3f, U+7af9, U+7bad, U+7bb1, U+7c4d, U+7c89, U+7c97, U+7ed5, U+7ee9-7eea, U+7efc, U+8010, U+8083, U+80a9, U+80c1, U+8109, U+814a, U+8150, U+8170, U+8179, U+8212, U+8258, U+82b3, U+8361, U+8377, U+83f2, U+8482, U+8584, U+8bca, U+8be6, U+8c6a, U+8c8c, U+8d21, U+8d2f, U+8d34, U+8d4f, U+8d8b, U+8dc3, U+8dcc, U+8df5, U+8e2a, U+8f88, U+8f9b, U+8f9e, U+8fd4, U+8fea, U+9012, U+903b-903c, U+9075, U+90aa, U+90ce, U+9178, U+9501, U+952e, U+95f2, U+9605, U+970d, U+9887, U+9891, U+9897, U+989c, U+98d8, U+9910, U+996e, U+9a71, U+9a76, U+9a7e, U+9a82, U+9a97, U+9ece, U+9f84;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.8.woff2) format('woff2');
+ unicode-range: U+4e1b, U+4e22, U+4e8f, U+4ed7, U+4ef2, U+4faf, U+5179, U+517d, U+51a0, U+51af, U+51cc, U+51dd, U+524a, U+5272, U+5306, U+5362, U+538c, U+53d9, U+53db, U+5410, U+5415, U+541e, U+5428, U+543e, U+54ac, U+54c0, U+55b7, U+561b, U+57cb, U+5939, U+5948, U+5b8f, U+5bbf, U+5bc2, U+5bc4, U+5bff, U+5c18, U+5c1d, U+5c48, U+5c82, U+5c97, U+5ce1, U+5e10, U+5e3d, U+5e7d, U+5ef7, U+5f25, U+5f2f, U+5faa, U+6016, U+6028, U+6052, U+606d, U+607c, U+609f, U+60e7, U+614c, U+614e, U+6170, U+6208, U+6241, U+6263, U+6276, U+6291, U+6296, U+629a-629b, U+62bc, U+62f3, U+6324, U+6377, U+63ed, U+642c, U+64e6, U+6566, U+6572, U+659c, U+65e8, U+6606, U+660c, U+6643, U+664b, U+6676, U+6696, U+66f0, U+67f1, U+6863, U+68af-68b0, U+6905, U+6b3a, U+6c60, U+6c64, U+6c88, U+6c9f, U+6cc9, U+6d45, U+6d82, U+6d8c, U+6e14, U+6e7f, U+6f20, U+6fb3, U+70bc, U+70c2, U+7164, U+718a, U+71d5, U+7262, U+7275, U+72e0, U+72fc, U+730e, U+732a-732b, U+7384, U+73bb, U+7434, U+745f, U+74f6, U+75ab, U+75b2, U+75bc, U+764c, U+76d7, U+78c1, U+795d, U+7965, U+796d, U+79e9, U+7a00, U+7a46, U+7b79, U+7c92, U+7cb9, U+7cd6, U+7d2b, U+7ea0, U+7eb9, U+7ebd, U+8017, U+806a, U+809a, U+809d, U+80a4-80a5, U+80bf, U+810f, U+817e, U+81c2, U+8270, U+82cd, U+83cc, U+8463, U+86c7, U+8870, U+8881, U+8896, U+8a89, U+8be2, U+8bf1, U+8c46, U+8d37, U+8d3a, U+8d4b, U+8d54, U+8d64, U+8de8, U+8e0f, U+8eb2, U+8eba, U+8f89, U+8f96, U+8fc1, U+8fc8, U+900a, U+9063, U+9065, U+9093, U+90ae, U+90bb, U+9189, U+9274, U+94a2, U+94bb, U+94dc, U+94fa, U+950b, U+9601, U+9614, U+966a, U+9676, U+96fe, U+978b, U+97e6, U+9970, U+9b4f, U+9e23, U+9f20, U+9f7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.9.woff2) format('woff2');
+ unicode-range: U+4e11, U+4e18, U+4e32, U+4e59, U+4e73, U+4e7e, U+4ec6, U+4ed3, U+4f10, U+4f8d, U+4fca, U+4ff1, U+5085, U+50b2, U+50bb, U+51fd, U+5237, U+5265, U+52a3, U+52ab, U+5339, U+5353, U+535c, U+5367, U+543b, U+5475, U+54e6, U+54e9, U+54fc, U+5507, U+5524, U+5582, U+5598, U+5609, U+5740, U+575b, U+582a, U+586b, U+5893, U+58f3, U+5938, U+5951, U+5978, U+5996, U+59a5, U+59a8, U+59ff, U+5a03, U+5acc, U+5b85, U+5bf8, U+5bfa, U+5c3f, U+5c4f, U+5c65, U+5cb3, U+5e05, U+5e99, U+5e9e, U+5ec9, U+5fcc, U+6094, U+60a6, U+60ac, U+60df, U+60e9, U+6109, U+611a, U+6155, U+6247, U+6254, U+626d-626e, U+62e6, U+62e8, U+62fc, U+62fe, U+6316, U+6321, U+6323, U+6349, U+63a0, U+642d, U+643a, U+65a4-65a5, U+6602, U+6674, U+679a, U+67dc, U+67ef, U+67f4, U+6842-6843, U+68c9, U+6b20, U+6b47, U+6b7c, U+6bc5, U+6c27, U+6c6a, U+6c83, U+6ce1, U+6d51, U+6d69, U+6da8, U+6dfb, U+6e34, U+6e83, U+6e9c, U+6ecb, U+6ef4, U+7089, U+7235, U+727a, U+73b2, U+7483, U+74dc, U+758f, U+75d5, U+7626, U+76b1, U+76d0, U+76ef, U+7720, U+7741, U+7897, U+7978, U+7a74, U+7a9d, U+7aed, U+7b3c, U+7cdf, U+7eb2, U+7ed8, U+7ef3, U+7f1d, U+7f34, U+7f69, U+7fbd, U+7ff0, U+8000, U+8015, U+804a, U+808c, U+80a0, U+80c3, U+80ce, U+80d6, U+8106, U+8154, U+8180, U+819c, U+820c, U+8231, U+82ac, U+82d7, U+8328, U+832b, U+8389, U+83b2, U+8427, U+845b, U+84c4, U+859b, U+8702, U+8986, U+89c8, U+8bbc, U+8bde, U+8c28, U+8c6b, U+8d24, U+8d2a, U+8d62, U+8d74, U+8f68, U+8fa8, U+8fb1, U+9006, U+9080, U+90c1, U+90ed, U+9177, U+94c3, U+9510, U+9526, U+95f7, U+9675, U+96b6, U+96c7, U+96d5, U+9738, U+98a4, U+9971-9972, U+997f, U+9e3f, U+9e4f, U+9e70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.10.woff2) format('woff2');
+ unicode-range: U+4ea8, U+4ead, U+4ed1, U+4f50, U+4fd8, U+5018, U+5021, U+50ac, U+50e7, U+5112, U+5188, U+51bb, U+51d1, U+52c9, U+52fe, U+5320, U+5351, U+5375, U+537f, U+53a8, U+5401, U+540a, U+541f, U+5435, U+543c, U+5490, U+54bd, U+5509, U+5565, U+5589, U+55ef, U+5631, U+56ca, U+5733, U+5851, U+5915, U+5984, U+59ae, U+59fb, U+5a07, U+5a74, U+5ac1-5ac2, U+5b55, U+5b5d, U+5bb0, U+5bb4, U+5bd3, U+5c09, U+5c60, U+5d29, U+5deb, U+5eb8, U+5eca, U+5f8c, U+6014, U+60a0, U+6101, U+626f, U+62ab, U+62b9, U+62c6, U+62d8, U+6328, U+644a, U+6458, U+6467, U+6491, U+6591, U+65bc, U+65fa, U+662d, U+6734, U+6746, U+67af, U+680f, U+6846, U+68cb, U+68f5, U+6b49, U+6b67, U+6c1b, U+6cc4, U+6cca, U+6d59, U+6d66, U+6d9b, U+6dcb, U+6e0a, U+6eaa, U+6ee9, U+6f0f, U+6f58, U+704c, U+7239, U+72ed, U+7329, U+7334, U+7391, U+7487, U+751c, U+752b, U+7545, U+754f, U+755c, U+7586, U+7624, U+76c6, U+76c8, U+76d2, U+76f2, U+76fc, U+77aa, U+77ac, U+77e3, U+77e9, U+77ee, U+78a7, U+7985, U+79a7, U+79d2, U+7a83, U+7b52, U+7ea4, U+7ef5, U+7f20, U+7f9e, U+7fc1, U+7fc5, U+7fd4, U+7fe0, U+8038, U+803b, U+8096, U+80ba, U+80c0, U+80f6, U+8116, U+81ed, U+8273, U+829d, U+838e, U+840d, U+8461, U+846c, U+853d, U+85aa, U+85e4, U+8679, U+86ee, U+871c, U+8822, U+886b, U+8877, U+88d5, U+88e4, U+88f8, U+8a93, U+8bb6, U+8c05, U+8c0a, U+8c2d, U+8d26, U+8d3c, U+8d3e, U+8d4c, U+8d50, U+8d5a, U+8d60, U+8d81, U+8dea, U+8f85, U+8f9f, U+8fbd, U+901d, U+9022, U+9042, U+906e, U+916c, U+94a6, U+94ed, U+94fe, U+9505, U+9521, U+95ef, U+9610, U+9640, U+9655, U+971e, U+987d, U+9888, U+98a0, U+9965, U+9a70, U+9a73, U+9aa4, U+9c8d, U+9e2d, U+9e45, U+9e7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.11.woff2) format('woff2');
+ unicode-range: U+4ea9, U+4f1e, U+4fa8, U+4fef, U+5026, U+50da, U+50f5, U+5146, U+5154, U+51a4, U+51c4, U+522e, U+5239, U+526a, U+52cb, U+532a, U+5398, U+53a6, U+53c9, U+53e0, U+540f, U+5429, U+5492, U+5496, U+54b3, U+54ce, U+54d1, U+54e8, U+5561, U+5578, U+5583, U+55bb, U+5632, U+5662, U+56b7, U+5751, U+575f-5760, U+5784, U+5835, U+5937, U+59ca, U+59da, U+59dc, U+59e8, U+5a9a, U+5ab3, U+5be1, U+5be8, U+5c41, U+5cad, U+5d16, U+5de2, U+5de9, U+5df7, U+5dfe, U+5f0a, U+5f13, U+5f26, U+5fbd, U+6055, U+6073, U+60f6, U+60f9, U+6123, U+6127, U+6168, U+61be, U+61d2, U+621a, U+6284, U+62d0, U+62d3, U+62e2, U+632a, U+633d, U+6350, U+6367, U+638f, U+6398, U+6401, U+640f, U+6454, U+6495, U+64b0, U+64c5, U+65ec, U+6614, U+6627, U+6655, U+6670, U+676d, U+67c4, U+68cd, U+68d2, U+6b6a, U+6bb7, U+6cfc, U+6d12, U+6d74, U+6d78, U+6d85, U+6db5, U+6deb, U+6dee, U+6e20, U+6e58, U+6eb6, U+6ede, U+6ee5, U+6f06, U+70ad, U+7130, U+714c, U+715e, U+722a, U+723d, U+72c4, U+72d0, U+72ee, U+733f, U+73ab, U+7433, U+743c, U+74f7, U+75f4, U+7728, U+778e, U+780d, U+7816, U+7855, U+7891, U+7984, U+7a23, U+7a84, U+7a91, U+7b28, U+7b4b, U+7bee, U+7c98, U+7ee2, U+7f55, U+800d, U+8058, U+80a2, U+80be, U+8102, U+810a, U+813e, U+817a, U+819d, U+8205-8206, U+821f, U+8236, U+8292, U+8302, U+8305, U+8350, U+83e9, U+8404, U+84b2, U+84b8, U+84ec, U+8521, U+8776, U+87ba, U+8854, U+888d, U+88f9, U+8bbd, U+8c0d-8c0e, U+8c26, U+8c2c, U+8c31, U+8d1e, U+8eaf, U+8f69, U+8fb0, U+902e, U+9038, U+90ca, U+90e1, U+9489, U+9493, U+94a9, U+964c, U+9661, U+96c0, U+96cc, U+97ad, U+9881, U+9976, U+997c, U+9a84, U+9a9a, U+9e26, U+9f0e, U+9f9f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.12.woff2) format('woff2');
+ unicode-range: U+4e38, U+4e56, U+4e5e, U+4f3d, U+4f63, U+5029, U+508d, U+5151, U+515c, U+5180, U+51f0, U+5256, U+5288, U+52d8, U+52ff, U+5308, U+5319, U+5352, U+5378, U+5384, U+53a2, U+545c, U+5495, U+54a8, U+54b8, U+54c4, U+54c7, U+54d7, U+54df, U+5580, U+55d3, U+563b, U+563f, U+56da, U+574a, U+574e, U+5792, U+57ab, U+5824, U+584c, U+5858, U+58e4, U+58f6, U+5983, U+5992, U+5a1f, U+5a31, U+5a36, U+5ae9, U+5b9b, U+5ba0, U+5bc7, U+5c51, U+5c61, U+5cfb, U+5d14, U+5e06, U+5e18, U+5e62, U+5f66, U+5f6a, U+6021, U+602f, U+604d, U+62f1, U+632b, U+634f, U+635e, U+6380, U+6500, U+655e, U+658b-658c, U+65a9, U+65f1, U+673d, U+6756, U+6816-6817, U+682a, U+683d, U+6853, U+6869, U+6876, U+68da, U+68e0, U+690e, U+699c, U+6bd9, U+6c41, U+6c5d, U+6cab, U+6cbc, U+6cbe, U+6ce3, U+6dd8, U+6df9, U+6e17, U+6ea2, U+6ee8, U+707f, U+7092, U+70db, U+7109, U+711a, U+716e, U+7199, U+73ca, U+7470, U+7538, U+7779, U+7784, U+7792, U+7838, U+788c, U+7948, U+7977, U+79bd, U+79c3, U+7a3b, U+7a3d, U+7a9c, U+7ad6, U+7b1b, U+7bf7, U+7cd5, U+7eb1, U+7eba, U+7ec5, U+7ed1, U+7ee3, U+7f1a, U+7f50, U+8086, U+80f3, U+8155, U+818a, U+81a8, U+82a6, U+82af, U+82f9, U+8346, U+83ca, U+8511, U+864f, U+8681, U+8721, U+884d, U+886c, U+88d9, U+8a79, U+8b6c, U+8bc8, U+8be1, U+8bf5, U+8c10, U+8c15, U+8c1c, U+8c23, U+8c34, U+8c79, U+8d29, U+8d2c, U+8d31, U+8d3f, U+8d9f, U+8e22, U+8e29, U+8e72, U+8e81, U+8f74, U+8f7f, U+8f90, U+8f9c, U+8fa3, U+8fc4, U+8fe6, U+9017, U+90b1, U+9119, U+9187, U+94a5, U+94a7, U+94f8, U+953b, U+9551, U+960e, U+9699, U+96c1, U+9706, U+9709, U+9756, U+97f5, U+9882, U+9896, U+99a8, U+9a74, U+9a87, U+9b41, U+9b44;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.13.woff2) format('woff2');
+ unicode-range: U+4e10, U+4e19, U+4e2b, U+4f3a, U+4f51, U+4f84, U+4fa3, U+4fae, U+4ffa, U+500f, U+501a, U+516e, U+51a5, U+51b6, U+51f3, U+51ff, U+5203, U+5220, U+527f, U+52df, U+5300, U+53a5, U+53ed-53ee, U+54a7, U+54af, U+54c9, U+5587, U+55a7, U+55c5, U+55e1, U+55e3, U+5636, U+566a, U+56bc, U+573e, U+575d, U+576a, U+5783, U+57ae, U+5815, U+594e, U+5960, U+5962, U+5986, U+5993, U+59ec, U+5a25, U+5a49, U+5ac9, U+5bde, U+5c2c, U+5c34, U+5c7f, U+5c9a, U+5d0e, U+5e87, U+5f18, U+5f6c, U+60d5, U+6115, U+618e, U+61c8, U+62c2, U+62d9, U+62ef, U+6320, U+6346, U+6361, U+6363, U+63b7, U+6402, U+6405, U+6577, U+65a7, U+65f7, U+663c, U+6652, U+6664, U+6687, U+6691, U+66ae, U+6749, U+674f, U+6795, U+67a2, U+680b, U+6850, U+68a2, U+68ad, U+68b3, U+68d5, U+68fa, U+69b4, U+6a31, U+6bef, U+6c22, U+6c79, U+6ca6, U+6caa, U+6cb8, U+6ccc, U+6cf3, U+6cfb, U+6d46, U+6da1, U+6daf, U+6dd1, U+6eaf, U+6ed4, U+6f6d, U+6f84, U+6f9c, U+6fa1, U+7076, U+70c1, U+70e4, U+7115, U+71ac, U+71e5, U+72ac, U+72e1, U+72f8, U+7529, U+7574, U+75d2, U+7785, U+77a5, U+7802, U+786b, U+78b3, U+7a1a, U+7a3c, U+7aa5, U+7eac, U+7ed2, U+7ede, U+7ee5, U+7ef8, U+7f05, U+7f14, U+7fa1, U+803d, U+803f, U+8042, U+8165, U+818f, U+8299, U+82bd, U+830e, U+8335, U+836b, U+83b9, U+83bd, U+840e, U+841d, U+84c9, U+852c, U+8574, U+85c9, U+85e9, U+85fb, U+8650, U+8680, U+8695, U+86db, U+8700, U+8747, U+8859, U+8910, U+8bcf, U+8be7, U+8beb, U+8e44, U+8e48, U+8eac, U+901b, U+903e, U+904f, U+917f, U+949e, U+94ae, U+94c5, U+9556, U+9600, U+964b, U+965b, U+971c, U+9877, U+988a, U+9a7c, U+9ab8, U+9b45, U+9cb8, U+9cde, U+9e3d, U+9e64, U+9e9f, U+9ebd, U+9edb;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.14.woff2) format('woff2');
+ unicode-range: U+4e4d, U+4f36, U+4fcf, U+4fed, U+50fb, U+5140, U+51a2, U+51f8-51f9, U+533f, U+5395, U+53e8-53e9, U+5431, U+5450, U+5455, U+547b, U+548b, U+549a, U+54ee, U+54fa, U+5564, U+556a, U+557c, U+5594, U+55dc, U+55fd, U+560e, U+5618, U+561f, U+56a3, U+5764, U+57a3, U+5885, U+589f, U+59e5, U+5a05, U+5a76, U+5b7d, U+5ba6, U+5bdd, U+5c39, U+5c6f, U+5ced, U+5d4c, U+5e16, U+5e1c, U+5e90, U+5ed3, U+5ed6, U+5f70, U+5fd6, U+60af, U+60bc, U+60ed, U+6151, U+6177, U+61ff, U+6233, U+625b, U+627c, U+62da, U+62e3, U+631f, U+63c9, U+63fd, U+6487, U+64bc, U+64d2, U+655b, U+6590, U+65ed, U+664c, U+6726, U+6789, U+67a3, U+6805, U+6813, U+6868, U+6897, U+68d8, U+68f1, U+69fd, U+6a61, U+6b79, U+6bcb, U+6bd3, U+6c70, U+6cae, U+6d47, U+6d4a, U+6d4f, U+6da9, U+6dcc, U+6e3a, U+6e85, U+707c, U+7095, U+70af, U+70eb, U+714e, U+7184, U+718f, U+725f, U+73c0, U+7409, U+7410, U+7422, U+745b-745c, U+7476, U+74e3, U+7554, U+762b, U+766b, U+76cf, U+7729, U+772f, U+7737, U+77bb, U+77e2, U+77eb, U+7830, U+789f, U+78b1, U+78c5, U+78d5, U+78f7, U+7901, U+7980, U+79b9, U+79c9, U+7a98, U+7a9f, U+7aa6, U+7aff, U+7c07, U+7c3f, U+7c9f, U+7caa, U+7ef0, U+7ef7, U+7f06, U+7f15, U+7f38, U+7fd8, U+804b, U+80da, U+80e7, U+817b, U+819b, U+82d1, U+82df, U+83ba, U+83f1, U+840c, U+8471, U+8513, U+8654, U+865e, U+867e, U+8682, U+868a, U+86d9, U+8774, U+88d4, U+88d8, U+88f3, U+8944, U+895f, U+89c5, U+8ba5, U+8bb3, U+8bc0, U+8c41, U+8d2e, U+8d4e, U+8db4, U+8dcb, U+8e66, U+8f7c, U+8fc2, U+90b5, U+9102, U+914c, U+91c9, U+9499, U+9524, U+9576, U+968b, U+96ef, U+9885, U+9890, U+9893, U+9988, U+9a6f, U+9a86, U+9ad3, U+9ccd, U+9eef;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.15.woff2) format('woff2');
+ unicode-range: U+4ea5, U+4ed5, U+4f5f, U+4f88, U+5162, U+5189, U+51db, U+5254, U+5323, U+5366, U+53ae, U+53f1, U+53fd, U+542d, U+5443, U+5499, U+54a6, U+552c, U+553e, U+55e6, U+565c, U+575e, U+57a6, U+57d4, U+58d5, U+592d, U+5955, U+599e, U+5a62, U+5a6a, U+5a7f, U+5ae6, U+5b5c, U+5bb5, U+5be5, U+5c49, U+5c94, U+5cd9, U+5ce8, U+5d1b, U+5d2d, U+5e9a, U+5eb5-5eb6, U+5f27, U+5f8a, U+5f98, U+5fcf, U+5fd2, U+5fff, U+6020, U+608d, U+6096, U+60eb, U+618b, U+61e6, U+6252, U+6273, U+6292, U+62c7, U+62e7, U+62f4, U+631a, U+6342, U+63e3, U+63ea, U+6413, U+6479, U+64ce, U+659f, U+6666, U+6714-6715, U+6760, U+67ec, U+6808, U+68a8, U+6912, U+69bb, U+69d0, U+6a71, U+6a90, U+6b86, U+6c13, U+6c28, U+6c2f, U+6c40, U+6c81, U+6c9b, U+6ca7, U+6d3d, U+6d95, U+6dc0, U+6df3, U+6e23, U+6e5b, U+6fd2, U+7011, U+717d, U+7194, U+7261, U+7281, U+72c8, U+72e9, U+733e, U+742a, U+745a, U+7578, U+75a4, U+75ae, U+75ea, U+75f0, U+7682, U+7693, U+76d4, U+7736, U+7766, U+77d7, U+785d, U+7940, U+79ba, U+79fd, U+7a8d, U+7b77, U+7bf1, U+7ca4-7ca5, U+7cd9, U+7d0a, U+7d6e, U+7eca, U+7ece, U+7efd, U+7f00, U+7f09, U+7f0e, U+8098, U+80aa, U+80ae, U+812f, U+816e, U+81c0, U+821c, U+8235, U+8237, U+82ad, U+82b8, U+82d4, U+82db, U+8304, U+831c, U+84e6, U+851a, U+8549, U+8587, U+8718, U+8749, U+87f9, U+8845, U+889c, U+88f4, U+8902, U+8bc5, U+8bec, U+8c0f, U+8c1f, U+8d41, U+8d66, U+8dbe, U+8e31, U+8fed, U+901e, U+9091, U+90b8-90b9, U+90dd, U+9171, U+9176, U+918b, U+949d, U+94c0, U+94ee, U+94f2, U+9523, U+9525, U+952f, U+9698, U+9704, U+9716, U+9761, U+9774, U+978d, U+9798, U+97a0, U+97e7, U+9975, U+9977, U+9ae6, U+9e43, U+9f9a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.16.woff2) format('woff2');
+ unicode-range: U+4e1e, U+4ea2, U+4f0e, U+4f22, U+4f43, U+4f6c, U+4f6f, U+4f83, U+4fa5, U+4fac, U+4fde, U+502a, U+502d, U+5243, U+52fa, U+5315, U+5321, U+5349, U+5484, U+5486, U+548e, U+54aa, U+54c6, U+5514, U+5520, U+5543, U+55b3, U+55bd, U+55e4, U+55e8, U+5600, U+566c, U+568e, U+57a2, U+595a, U+59be, U+5a34, U+5b09, U+5b75, U+5c27, U+5c4e, U+5dcd, U+5df3, U+5e4c, U+5eff, U+5f1b, U+5fe1, U+5ff1, U+6043, U+6064, U+60da, U+60f0, U+60fa, U+61ca, U+620e, U+622e, U+62a8, U+62ce, U+62ed, U+62f7, U+62fd, U+631b, U+6345, U+634d, U+63ba, U+6400, U+655d, U+66d9, U+66f3, U+672d, U+67ab, U+67ff, U+6854, U+68a7, U+68b5, U+692d, U+695e, U+6986, U+69db, U+6a0a, U+6a35, U+6b89, U+6bb4, U+6c72, U+6c8c, U+6d3c, U+6da4, U+6dc6, U+6e0e, U+6eba, U+6ee4, U+6f47, U+6f88, U+708a, U+70ab, U+70b3, U+70bd, U+70d8, U+7118, U+72d2, U+7316, U+731d, U+741b, U+7426, U+748b, U+752d, U+759a, U+75a1, U+75b9, U+75f9, U+761f, U+763e, U+7696, U+7738, U+773a, U+776c, U+77a9, U+77bf, U+77f6, U+780c, U+7845, U+78cb, U+7960, U+7a20, U+7a57, U+7a92, U+7a96, U+7b03, U+7b20, U+7b5b, U+7c27, U+7eeb, U+7f2a, U+7f81, U+7fe9, U+8087, U+808b, U+809b, U+80f0, U+8113, U+81b3, U+81fb, U+8214, U+829c, U+82c7, U+8338, U+8367, U+83c1, U+83c7, U+846b, U+854a, U+857e, U+85af, U+86fe, U+8757, U+8760, U+88b1, U+892a, U+8bdb, U+8c12, U+8c1b, U+8c24, U+8c5a, U+8d42-8d43, U+8d63, U+8dc4, U+8e09, U+8e0c, U+8e6c, U+8e87, U+8f67, U+8f99, U+8fab, U+8ff8, U+9041, U+90a2, U+915d, U+948a, U+94b3, U+94dd, U+9508, U+9555, U+95f8, U+95fa, U+95fd, U+962e, U+9631, U+9647, U+9668, U+9685, U+96a7, U+96cd, U+970e, U+9776, U+988c, U+9a8f, U+9aa1, U+9ca4, U+9e25;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.17.woff2) format('woff2');
+ unicode-range: U+4e52-4e53, U+4eb5, U+4fd0, U+4fe8, U+4ffe, U+5014, U+5195, U+524c, U+52be, U+533e, U+5406, U+541d, U+5420, U+545b, U+5471, U+5480, U+548f, U+54dd, U+5544, U+55d2, U+55d4, U+5608, U+5657, U+5669, U+5693, U+56f1, U+5703, U+572d, U+574d, U+57e0, U+5811, U+5830, U+58a9, U+5944, U+598a, U+5a20, U+5a3c, U+5ad6, U+5ae3, U+5b5a, U+5b70, U+5bc5, U+5c91, U+5d69, U+5e27, U+5e37, U+5e54, U+5e61, U+5f29, U+5f57, U+5f5d, U+5f77, U+5f99, U+6005, U+606a, U+607a, U+609a, U+60b4, U+60b8, U+60cb, U+60d8, U+612b, U+6194, U+6289, U+62cc, U+6376, U+637b, U+6390, U+63a3, U+63b3, U+63cd, U+63d6, U+6414, U+64a9, U+64ae, U+6512, U+6518, U+6538, U+6555-6556, U+6656, U+66a8, U+66dd, U+6845, U+6977, U+6a44, U+6a59, U+6a80, U+6b83, U+6bd7, U+6be1, U+6c2e, U+6c90, U+6ca5, U+6cbd, U+6de4, U+6e89, U+6ec7, U+6f13, U+6f31, U+6f8e, U+70ac, U+70d9, U+70f9, U+7280, U+72de, U+7405, U+7459, U+74a7, U+7599, U+75c9, U+7629, U+76ce, U+776b, U+777e-777f, U+783e, U+78ca, U+78fa, U+7941, U+795f, U+797a, U+79be, U+79e7, U+7a79, U+7afa, U+7b0b, U+7b50, U+7b5d, U+7be1, U+7c38, U+7c7d, U+7cb1, U+7e82, U+7eb6, U+7eee, U+7f8c, U+7fce, U+807f, U+80b4, U+80fa, U+814b, U+8151, U+8153, U+8339, U+8403, U+8424, U+8475, U+849c, U+853c, U+8611, U+86df, U+8782, U+8815, U+8884-8885, U+8892, U+8912, U+8925, U+89d1, U+8bd8, U+8be3, U+8bf2, U+8bfd, U+8d3b, U+8d58, U+8f84, U+8f97, U+900d, U+914b, U+9163, U+9165, U+9175, U+94a0, U+94b5, U+94e2, U+9504, U+950c, U+951a, U+9619, U+961c, U+962a, U+96cf, U+96f3, U+9739, U+9785, U+97f6, U+987c, U+9889, U+9a6d-9a6e, U+9abc, U+9ccc, U+9e20, U+9e4a, U+9e66, U+9e93, U+9edd, U+9f8b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.18.woff2) format('woff2');
+ unicode-range: U+4e15, U+4e9f, U+4f8f, U+4fdf, U+504e, U+5055, U+50a9, U+5197, U+51cb, U+5201, U+5228, U+532e, U+5364, U+53fc, U+542e, U+5494, U+54d2, U+54e7, U+54fd, U+5506, U+5527, U+5567, U+558b, U+55d6, U+5676, U+576f, U+5942, U+5a77, U+5ae1, U+5ce6, U+5d3d, U+5d4b, U+5dc5, U+5e1a-5e1b, U+5f3c, U+6002, U+6026, U+6059, U+606c, U+60bb, U+60e6, U+60ee, U+60f4, U+61a7-61a8, U+61ac, U+620a, U+620d, U+621f, U+62bf, U+62c8, U+62d7, U+631d, U+634e, U+63e9, U+6410, U+6452, U+64ac, U+64b5, U+64c2, U+652b, U+66e6, U+67b7, U+6829, U+6862, U+6893, U+6960, U+6984, U+69a8, U+6a58, U+6c16, U+6c1f, U+6c5b, U+6c5e, U+6c76, U+6c7e, U+6c82, U+6cf5, U+6d52, U+6d5a, U+6d8e, U+6dc4, U+6e0d, U+6e1d, U+6e24, U+6e2d, U+6e32, U+6e44, U+6f09, U+6f29-6f2a, U+6f3e, U+6f66, U+701a, U+7099, U+70ec, U+72d9, U+73ba, U+73c2, U+73d1, U+7435-7436, U+747e, U+74e2, U+75a3, U+75ca, U+75d4, U+7622, U+7656, U+7688, U+76bf, U+779f, U+77b3, U+77dc, U+7889, U+7898, U+78be, U+78d0, U+79e4, U+7ae3, U+7b06, U+7b08, U+7b3a, U+7b4f, U+7b8d, U+7bab, U+7cdc, U+7eda, U+7f24, U+7f2d, U+7f94, U+7fcc, U+8006, U+8046, U+80e5, U+81ba, U+81c6, U+82b9, U+82de, U+82ef, U+8327, U+832c, U+8340, U+8343, U+8543, U+85d0, U+85e5, U+86e4, U+8712, U+8715, U+8717, U+8737, U+8785, U+87c0, U+87cb, U+87d2, U+8879, U+8936, U+8baa, U+8bb9, U+8bc3, U+8be0, U+8c11, U+8c1a, U+8c62, U+8de4, U+8df7, U+8dfa, U+8e1e, U+8e35, U+8e4b, U+8e51, U+8e6d, U+8e7f, U+8fe5, U+9035, U+916a, U+91ab, U+91dc, U+9497, U+94ce, U+94d0, U+95f5, U+9611, U+9713, U+97ec, U+996c, U+997a, U+9985, U+9992, U+9a79, U+9a7f, U+9ab7, U+9ac5, U+9b13, U+9ca8, U+9cc4, U+9e49, U+9ecf;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.19.woff2) format('woff2');
+ unicode-range: U+4e98, U+4f5a, U+4f7c, U+4ff8, U+504c, U+5080, U+50a3, U+50ed, U+5121, U+523d, U+536f, U+53df, U+5457, U+5478, U+5537, U+556c, U+5599, U+55df, U+55f3, U+564e, U+568f, U+5742, U+5777, U+587e, U+58d1, U+59d7, U+5a13, U+5a75, U+5ab2, U+5ad4, U+5bd0, U+5bf0, U+5c79, U+5c90, U+605a, U+6063, U+607b, U+607f, U+60ec, U+61f5, U+620c, U+6248, U+62a1, U+637a, U+6396, U+6482, U+64b8, U+64de, U+6525, U+6593, U+660a, U+664f, U+667e, U+6684, U+66a7, U+675e, U+67ad, U+6866, U+6930, U+6954, U+6988, U+6aac, U+6b24, U+6ba1, U+6c26, U+6c55, U+6c93, U+6cde, U+6d9f, U+6da3, U+6da7, U+6db8, U+6dd6, U+6e43, U+6e4d, U+6ea5, U+6ed5, U+6f33, U+701b, U+7096, U+70fd, U+7119, U+715c, U+71b9, U+728a, U+7313, U+7357, U+73e5, U+740f, U+7455, U+7490, U+749e, U+74ee, U+7504, U+7525, U+75b5, U+762a, U+7638, U+768b, U+7691, U+76c5, U+7708, U+7750-7751, U+777d, U+77b0, U+796f, U+79f8, U+7a37, U+7abf, U+7b19, U+7b75, U+7b93, U+7c0c, U+7edb, U+7eef, U+7f04, U+7f2e, U+7f30, U+7f61, U+7f9a, U+7fb2, U+7fb9, U+7fdf, U+80e4, U+80f1, U+8110, U+8354, U+837c, U+8426, U+8446, U+84d3, U+8517, U+8537, U+85d5, U+8638, U+868c, U+86c0, U+86ca, U+86f9, U+8708, U+873f, U+874e, U+8759, U+8783, U+87c6, U+87fe, U+891a, U+8bb7, U+8bd9, U+8be9, U+8bf0, U+8c00, U+8c19, U+8c29, U+8d30, U+8d53, U+8d61, U+8dda-8ddb, U+8e0a, U+8e1d, U+8e42, U+8e4a, U+8e59, U+8e8f, U+8f72, U+8f95, U+8f98, U+8fe2, U+9050, U+907d, U+9083, U+90af, U+9149, U+916e, U+92c6, U+946b, U+94a1, U+94be, U+9522, U+9535, U+9540, U+956f-9570, U+9609, U+9773, U+988d, U+989a, U+998b, U+9aa5, U+9cc3, U+9cd6, U+9e2f, U+9e33, U+9e3e, U+9e73, U+9ed4, U+9f3e, U+9f88;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.20.woff2) format('woff2');
+ unicode-range: U+4f2b, U+5043, U+531d, U+5345, U+53a9, U+5477, U+5482, U+54ab, U+555c, U+557e, U+558f, U+55eb-55ec, U+55f7, U+5664, U+5685, U+56d4, U+572a, U+579b, U+58ec, U+59a9, U+5a04, U+5a29, U+5a9b, U+5b7a, U+5c96, U+5cac, U+5cb1, U+5d47, U+5e96, U+5f64, U+5f87, U+5fa8, U+5fb5, U+5fd0-5fd1, U+6006, U+606b, U+60c6, U+6249, U+62a0, U+630e, U+634b, U+6382, U+642a, U+6485, U+65a1, U+6635, U+66dc, U+6840, U+6867, U+6886, U+690b, U+693f, U+6963, U+6995, U+69cc, U+69df, U+6a1f, U+6a47, U+6a79, U+6c50, U+6d04, U+6d35, U+6d93, U+6d9d, U+6dc7, U+6dd9, U+6dde, U+6e25, U+6e6e, U+6f7a, U+6f7c, U+6fd1, U+7078, U+710a, U+714a, U+7166, U+71ce, U+7252, U+72f0, U+73b7, U+749c, U+74d2, U+752c, U+753a, U+759f, U+75b1, U+75bd, U+75d8, U+75de, U+75e2-75e3, U+75eb, U+7600, U+7620, U+7663, U+76c2, U+778c, U+77a0, U+781a, U+7825, U+795b, U+79c6, U+7a51, U+7aa0, U+7b71, U+7bd3, U+7c41, U+7ce0, U+7d93, U+7eab, U+7ef6, U+7f28, U+7f54, U+7f79, U+7fe1, U+7ff1, U+8018-8019, U+8037, U+8146, U+817c, U+81fc, U+82a5, U+82ae, U+82d3, U+8309, U+8317, U+835a, U+835f, U+836a, U+8393, U+843c, U+84ff, U+8559, U+85b0, U+85d3, U+8671, U+8693, U+86a3-86a4, U+86aa, U+86af, U+86d0, U+86d4, U+86f0, U+8713, U+873b, U+874c, U+88a4, U+88c6, U+8c04, U+8c06, U+8c0c, U+8c25, U+8c27, U+8d48, U+8dfb, U+8e52, U+8f76, U+8f8d-8f8e, U+9019, U+9099, U+90f8, U+9157, U+9170, U+91ae, U+91ba, U+94ec, U+94ff, U+952d, U+9539, U+9541, U+95e9, U+95f0, U+95fe, U+9602, U+96bc, U+96f9, U+977c, U+9791, U+9894, U+98d3, U+98d9, U+9981, U+998d, U+9a8b, U+9aef, U+9afb, U+9c87, U+9cab, U+9cce, U+9cd7, U+9e5e, U+9e9d, U+9edc, U+9ee0, U+9f9b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.21.woff2) format('woff2');
+ unicode-range: U+4ec4, U+4fd1, U+4fda, U+500c, U+5048, U+51bd, U+527d, U+530d, U+5310, U+53c1, U+53f5, U+549b, U+549d, U+54bb, U+5511, U+556e, U+5575, U+557b, U+55e5, U+5624, U+567c, U+5729, U+57a0, U+57c2, U+5914, U+5919, U+5a11, U+5a32, U+5a4a, U+5b40, U+5b5b, U+5b62, U+5b6a, U+5b93, U+5b95, U+5bb8, U+5c8c, U+5cea, U+5f0b, U+5ffb, U+600f, U+61a9, U+61cb, U+623e, U+62c4, U+6371, U+63ac, U+63b0, U+6448, U+645e, U+647a, U+65cc, U+6619, U+6641, U+6773, U+67d1, U+67e0, U+683e, U+68e3, U+6924, U+6994, U+6998, U+69ad, U+69b7, U+6c10, U+6c32, U+6c69, U+6c74, U+6c85, U+6ca3, U+6cb1, U+6cd7, U+6cef, U+6d0c, U+6d5c, U+6d63, U+6e9f, U+6f15, U+6f5e, U+6fb9, U+6fc2, U+6fee, U+7080, U+70ef, U+70f7, U+71a0, U+71b5, U+724d, U+7325, U+737e, U+7579, U+7601, U+7634, U+765e, U+768e, U+7699, U+76f9, U+7762, U+7791, U+77ad, U+7827, U+78b4, U+7950, U+7957, U+7b94-7b95, U+7bb4, U+7bc6, U+7bdd, U+7c26, U+7c2a, U+7cbc, U+7cef, U+7ea3, U+7ead, U+7ebe, U+7f1c, U+7f42, U+8004, U+80c4, U+80eb, U+80ed, U+814c, U+81ca, U+81e7, U+8200, U+8210, U+828b, U+828d, U+8364, U+8368, U+839e, U+8431, U+84bf, U+84df, U+8568, U+866c, U+86c6, U+86ed, U+86f3, U+8703, U+8725, U+87b3, U+87d1, U+87e0, U+87ee, U+8821, U+8862, U+88e8, U+891b, U+8934, U+8bd2, U+8bff, U+8c14, U+8c1d, U+8c21, U+8c4c, U+8c7a, U+8c82, U+8e69, U+8f8f, U+8fe9, U+904e, U+90c5, U+915a, U+92ae, U+949a-949b, U+94e0, U+950f, U+9530, U+953a, U+9542, U+954c, U+9550, U+956d, U+9616, U+968d, U+96bd, U+972d, U+973e, U+97ed, U+98d2, U+98d5, U+9955, U+9968, U+9980, U+9990, U+9995, U+9a78, U+9ab0, U+9b03, U+9b47, U+9c88, U+9c91, U+9e35, U+9e44, U+9e51, U+9e6b, U+9ebe;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.22.woff2) format('woff2');
+ unicode-range: U+4f32, U+4f57, U+4f97, U+4fe6, U+507b, U+50ee, U+5106, U+51c7, U+520d, U+5241, U+535e, U+5453, U+54a3, U+550f, U+5530, U+5555, U+5577, U+559f, U+55b5, U+55d1, U+5601, U+562d, U+5659, U+566b, U+56e4, U+5773, U+57fd, U+5892, U+5925, U+592f, U+5958, U+59ab, U+5a40, U+5abe, U+5b34, U+5bee, U+5ccb, U+5d02, U+5d99, U+5e7a, U+5e8b, U+5e91, U+5ea0, U+5f01, U+5f08, U+6035, U+6078, U+6120, U+61d1, U+621b, U+626a, U+62ee, U+631e, U+6387, U+63b8, U+643d, U+64e2, U+659b, U+6631, U+6654, U+6748, U+679e, U+67b8, U+67da, U+67e9, U+693d, U+699b, U+69c1, U+6a50, U+6b46, U+6b81, U+6b92-6b93, U+6c30, U+6c8f, U+6cd3, U+6cfe, U+6d9e, U+6dae, U+6dbf, U+6dfc, U+6e4e, U+6ec2, U+6ed3, U+6ee6, U+6f62, U+6fe1, U+70e8, U+71a8, U+71d4, U+71ee, U+732c, U+736d, U+73de, U+7425, U+7428, U+757f, U+75b8, U+765c, U+7678, U+7768, U+7837, U+7949, U+7a88, U+7b1e, U+7b60, U+7ba9, U+7c91, U+7efa-7efb, U+7efe, U+7f08, U+7f25, U+7f2b, U+7f44, U+7fca, U+80bd, U+80ef, U+8174, U+8191, U+81c3, U+81fe, U+8207, U+822b, U+826e, U+82aa, U+82b7, U+82f7, U+82fb, U+8301, U+8369, U+836d, U+837b, U+8398, U+83e0, U+84d1, U+85dc, U+867b, U+869c, U+86a9, U+86b1, U+86c9, U+86ce, U+8734, U+876e, U+8882, U+8996, U+89ca, U+89ce, U+89d0, U+89e5, U+89ef, U+8bab, U+8bcb, U+8bdc, U+8be4, U+8bf3, U+8c16-8c18, U+8d4a, U+8d73, U+8e39, U+8e76, U+8fe8, U+8ff3, U+9005, U+905b, U+90ba, U+90cf, U+9131, U+916f, U+91af, U+92c8, U+94b0, U+94db, U+94e1, U+954d, U+9563, U+9573, U+95f1, U+967d, U+96c9, U+97af, U+98a7, U+98e7, U+996a, U+997d, U+9991, U+9a81, U+9a88, U+9aa7, U+9ad4, U+9cc5, U+9cdd, U+9e6d, U+9f87, U+9f8a, U+9f8c, U+9fa2;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.23.woff2) format('woff2');
+ unicode-range: U+4e69, U+4ee8, U+4f58, U+4f5e, U+4fea, U+50d6, U+5208, U+5250, U+525c, U+5476, U+54a4, U+54a9, U+54bf, U+54c2, U+5550, U+5576, U+55dd, U+55ea, U+55f2, U+55f5, U+5639, U+5654, U+5658, U+56e1, U+56ff, U+57a9, U+58f9, U+598d, U+59e3, U+5a23, U+5b51, U+5ba5, U+5cab, U+5cb7, U+5cd2, U+5d34, U+5d58, U+5e3c, U+5f11, U+5f95, U+5fdd, U+6029, U+603c, U+607d, U+610e, U+6175, U+61d4, U+629f, U+63c4, U+63c6, U+6421, U+6441, U+64b7, U+65ab, U+6615, U+6657, U+66b9, U+6775, U+6809, U+680e, U+684e, U+688f, U+6942, U+696b, U+6979, U+6989, U+6a3d-6a3e, U+6a84, U+6cc5, U+6cf8, U+6d39, U+6d94, U+6dc5, U+6de6, U+6ee2, U+6f4d, U+6fa7, U+6fef, U+723b, U+7284, U+7292, U+729f, U+72b7, U+72fb, U+7315, U+7360, U+742c, U+7441, U+7480, U+74a8, U+7566, U+75ff, U+7619, U+76e5, U+77fe, U+782d, U+783a, U+787c, U+789b, U+78a3, U+795a, U+7a95, U+7ad1, U+7ae6, U+7b25, U+7bd9, U+7c95, U+7ec9, U+7f45, U+7fe6, U+80db, U+80dd, U+80ea, U+80f4, U+814e, U+821b, U+827f, U+82a9, U+82c1, U+82e3, U+82eb, U+830f, U+832f, U+852b, U+858f, U+8707, U+871a, U+87a8, U+8839, U+883c, U+8869, U+8872, U+88df, U+8a48, U+8ba3, U+8bb4, U+8bcc, U+8be8, U+8bee, U+8c36, U+8d32, U+8d5d, U+8d6d, U+8dba, U+8e2e, U+8f71, U+8f94, U+8fe4, U+9082, U+9095, U+909d, U+90e2, U+914a, U+9162, U+919b, U+936a, U+948d, U+949c, U+94b4, U+94c2, U+94e3-94e4, U+94e8-94e9, U+94f0-94f1, U+951f, U+9528, U+9532, U+9537, U+95f6, U+95ff, U+9604, U+9608, U+9642, U+9701, U+970f, U+9730, U+9753, U+98e8, U+996f, U+9984, U+998a, U+998f, U+9997, U+99a5, U+9a9b, U+9ae1, U+9b51, U+9c7f, U+9c9f, U+9e2c, U+9e4c, U+9e57-9e58, U+9e82, U+9e8b, U+9e92, U+9f85;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.24.woff2) format('woff2');
+ unicode-range: U+4ec3, U+4f09, U+4fce, U+4fe3, U+4ff3, U+501c, U+50a5, U+5156, U+52d6, U+5326, U+539d, U+5464, U+5501, U+5591, U+59aa, U+59b2, U+59d8, U+5a55, U+5ab8, U+5b17, U+5b37, U+5b71, U+5b73, U+5c50, U+5cc1, U+5ce5, U+5d06, U+5d82, U+5e44, U+5ebe, U+5f2d, U+5fad, U+5ff8, U+608c, U+6215, U+6221, U+63ae, U+63ff, U+65d6, U+6636, U+6772, U+6860, U+69ab, U+69ed, U+6a5b, U+6b59, U+6c24, U+6c29, U+6ca4, U+6cf1, U+6cf7, U+6d43, U+6d54, U+6dec, U+6e0c, U+6e1a, U+6e5f, U+6eb4, U+7094, U+709c, U+70c3, U+70ca, U+70e9, U+7113, U+7168, U+7172, U+71e7, U+7230, U+7337, U+7511, U+75c2, U+75c8, U+75e4, U+75e8, U+77f8, U+7812, U+7823, U+7826, U+784e, U+7852, U+789c, U+7934, U+795c, U+79e3, U+7a17, U+7a2e, U+7a39, U+7aa3, U+7ab8, U+7afd, U+7b0f, U+7b15, U+7b24, U+7b2b, U+7bfe, U+7cb2, U+7d50, U+7ea5, U+7ecc, U+7ee6, U+7f19, U+7f22, U+7faf, U+7fbf, U+7ff3, U+8026, U+8028, U+8093, U+80b1, U+8198, U+8238, U+8244, U+82a8, U+82cb, U+82e1, U+8311, U+8385-8386, U+83cf, U+847a, U+84d6, U+85ae, U+865b, U+8662, U+869d, U+86a8, U+86b4, U+86de, U+86f4, U+870a, U+8748, U+87ea, U+886e, U+8888, U+88dc, U+88f1, U+8913, U+8921, U+8983, U+8a8a, U+8b07, U+8b8a, U+8bd3, U+8bd6, U+8bdf, U+8c32, U+8c55, U+8cea, U+8d5c, U+8d84, U+8d94, U+8df8, U+8e74, U+8f6d, U+9021, U+9068, U+9088, U+908b, U+909b, U+90e7, U+9146, U+91b4, U+933e, U+9397, U+93d6, U+93e1, U+94a8, U+94c9, U+9502-9503, U+9509, U+9534, U+954f, U+9577, U+9593, U+95fc, U+960b, U+9615, U+9670, U+9672, U+9697, U+9765, U+985e, U+988f, U+98a6, U+98da, U+9994, U+9a85, U+9a8a, U+9a9e, U+9ab6, U+9aed, U+9c82, U+9e22, U+9e28, U+9e6c, U+9ec3, U+9f10, U+9f39, U+9f89;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.25.woff2) format('woff2');
+ unicode-range: U+4f5d, U+4f7b, U+5028, U+520e, U+52ac-52ad, U+53a3, U+5421, U+544b, U+5454, U+54ad, U+54d0, U+556d, U+55c4, U+560c, U+5623, U+5627, U+5671, U+56df, U+56eb, U+573b, U+58c5, U+5924, U+5997, U+5a0c, U+5a7a, U+5aaa, U+5ca2, U+5d27, U+5d2e, U+5fe4, U+5ffe, U+6041-6042, U+6079, U+622c, U+62bb, U+65c3, U+65ce, U+677c, U+67b0, U+68c2, U+69ce, U+69ff, U+6a2f, U+6b87, U+6b9a, U+6bc2, U+6bd6, U+6c05, U+6c1a, U+6c68, U+6d31, U+6d60, U+6dab, U+6ddd, U+6f46, U+6f78, U+6fc9, U+6fe0, U+704f, U+725d, U+7396, U+73ae, U+73c8, U+73cf, U+740a, U+7430, U+74e4, U+74ef, U+7572, U+75a5, U+761b, U+77cd, U+781d, U+7887, U+789a, U+7947, U+7a14, U+7a70, U+7bd1, U+7cbd, U+7ec0, U+7ef1, U+7f02, U+7f1b, U+7f26, U+7f2c, U+7f9f, U+7fd5, U+8052, U+80cd, U+810d, U+8171, U+8178, U+81c1, U+81ec, U+8202, U+8284, U+828e-828f, U+8297, U+82a1, U+82be, U+82cc, U+82dc, U+835e, U+8365, U+8392, U+83df, U+83f8, U+8438, U+8469, U+84af, U+85ff, U+867c, U+86a7, U+86c4, U+86e9, U+879f, U+87ab, U+8813, U+8816, U+887e, U+8941, U+898b, U+89de, U+8aaa, U+8ba6, U+8bc2, U+8bf9, U+8c20, U+8c2a, U+8c2f, U+8dcf, U+8e14, U+8e47, U+8e7c, U+8f03, U+8f87, U+900b, U+9036, U+9051, U+9062, U+9074, U+9084, U+90ac, U+90db, U+90e6, U+9123, U+912f, U+9169, U+91aa, U+938f, U+948f, U+9492, U+94a4, U+94bf, U+94f5, U+9536, U+9549, U+958b, U+95f3, U+960f, U+9612, U+9617, U+9621, U+96d2, U+97a3, U+984c, U+9880, U+989e, U+98a2, U+990d, U+9954, U+9967, U+9969, U+996b, U+9a57, U+9ac1, U+9acb, U+9b08, U+9b49, U+9c86, U+9c8e, U+9c9b, U+9ca2, U+9ca7, U+9cb6, U+9cd5, U+9e29-9e2a, U+9e39, U+9e5a, U+9e5c, U+9ecd, U+9ede, U+9ee9, U+9f83, U+9f86;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.26.woff2) format('woff2');
+ unicode-range: U+4e5c, U+4fa9, U+5088, U+50f3, U+51eb, U+535f, U+536e, U+5412, U+5466, U+5472, U+55c9, U+55cc-55cd, U+56f5, U+56f9, U+571c, U+5785, U+57ad, U+5800, U+580b, U+59af, U+59d2, U+59f9, U+5a09, U+5ae0, U+5c98, U+5ce4, U+5d3e, U+5d4a, U+5dfd, U+5e19, U+5e42, U+5ea5, U+5fea, U+6106, U+6308, U+6332, U+63bc, U+63f6, U+643f, U+64e4, U+65ee-65ef, U+66f7, U+6777, U+6787, U+678b, U+67a5, U+67b3, U+67de, U+67e2, U+6841, U+6849, U+69a7, U+69ca, U+6c18, U+6c2a, U+6c4a, U+6d6f, U+6daa, U+6e86, U+6f74, U+7116, U+7131, U+7256, U+7266, U+7350, U+73e9, U+742e, U+746d, U+759d, U+75fc, U+7618, U+77fd, U+7809, U+7829, U+786a, U+7893, U+78ec, U+79b3, U+7b0a, U+7b2a, U+7b2e, U+7b33, U+7b38, U+7b3e, U+7b9d, U+7bb8, U+7c1f, U+7ea1, U+7ea8, U+7eb0, U+7ed4, U+7f01, U+7f1f, U+7f36, U+8069, U+80bc, U+80e8, U+8132, U+816d, U+8188, U+8222, U+823b, U+82ab, U+82b0, U+82c4, U+82d5, U+8334, U+835b, U+839c, U+83a0, U+83b4, U+83b8, U+83c0, U+83c5, U+83d6, U+83ec, U+84ba, U+853a, U+8572, U+868b, U+86f1, U+870d, U+8722, U+8788, U+87db, U+880a, U+8832, U+88a2, U+88b7, U+88e2, U+88f0, U+8ad6, U+8b49, U+8ba7, U+8bb5, U+8bce, U+8bd4, U+8d4d, U+8db8, U+8dbf, U+8dce, U+8dde, U+8df9, U+8e05, U+8e3d, U+9016, U+9032, U+90c3, U+90d3, U+90ef, U+90f4, U+9122, U+919a, U+91a2, U+93ca, U+94b9, U+94c6, U+9511-9512, U+9515, U+954a, U+9552, U+9562, U+95dc, U+9603, U+9606, U+960c-960d, U+96f1, U+975b, U+97ea, U+9808, U+982d, U+98a8, U+990a, U+992e, U+9974, U+9993, U+9a14, U+9a77, U+9a93, U+9aa0, U+9ac2, U+9b23, U+9b3b, U+9b43, U+9b4d, U+9cca, U+9ccf, U+9cdf, U+9e37, U+9e46, U+9e55, U+9e67, U+9e69, U+9ebc, U+9efe, U+9f0b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.27.woff2) format('woff2');
+ unicode-range: U+4e47, U+4ede-4edf, U+4f25, U+4f64, U+4f70, U+4f76, U+4faa, U+50e6, U+51fc, U+5216, U+52a2, U+52d0, U+52f0, U+530f, U+531a, U+5363, U+538d, U+54b4, U+54d4, U+5541, U+5556, U+55fe, U+5704, U+572e, U+57d9, U+5941, U+5a06, U+5b6c, U+5b84, U+5be4, U+5c59, U+5cc4, U+5d03, U+5d6c, U+5d74, U+5e11, U+5eea, U+5f40, U+5f89, U+6004, U+6092, U+60ad, U+6100, U+610d, U+634c, U+63b4, U+63be, U+64c0, U+64d8, U+65c6, U+6600, U+665f, U+6710, U+67d8, U+6800, U+6861, U+6934, U+6987, U+69f2, U+6a17, U+6c21, U+6d19, U+6d5e, U+6d91, U+6e6b, U+6edf, U+709d, U+70b7, U+7198, U+71b3, U+726f, U+728d, U+72ce, U+736c, U+736f, U+73b3, U+73d0, U+7548, U+755a-755b, U+7596, U+75cd, U+763f, U+766f, U+7747, U+77ec, U+783b, U+784c, U+7850, U+7857, U+7877, U+78a1, U+78d4, U+7a1e, U+7a31, U+7b31, U+7b6e, U+7ba7, U+7bc0, U+7bea, U+7c74, U+7cb3, U+7cc1, U+7cc5, U+7d30, U+7da6, U+7e2f, U+7e47, U+7f03, U+7f17, U+7fb8, U+802a, U+8043, U+8084, U+809f, U+80ab, U+80d7, U+816b, U+8249, U+824f, U+829f, U+82ce, U+82e4, U+82f4, U+8331, U+83d4, U+859c, U+8655, U+867a, U+867f, U+86d1, U+86d8, U+872e, U+877c, U+87ad, U+87ca, U+8853, U+88e5, U+88fe, U+89f3, U+8a07, U+8a3a, U+8abf, U+8bf6, U+8c07, U+8c30, U+8c89, U+8d3d, U+8d45, U+8d67, U+8dc6, U+8dd7, U+8e5a, U+8f73, U+8f78, U+9026, U+9052, U+90a8, U+9104, U+91dd, U+9322, U+9485, U+94aa, U+94ba, U+94bc, U+94c4, U+94e7, U+9506, U+9529, U+9538, U+9567, U+95eb, U+96ce, U+96e0, U+9792, U+97ab, U+97b4, U+989b, U+98f2, U+9983, U+9a9c, U+9b2f, U+9c80, U+9c85, U+9c8b, U+9ca1, U+9cae, U+9cb0-9cb2, U+9e31, U+9e41-9e42, U+9e68, U+9ee2, U+9f0d, U+9f2c, U+9f51, U+9f80;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.28.woff2) format('woff2');
+ unicode-range: U+4e93, U+4eb3, U+4f27, U+4f65, U+4f94, U+4fc5, U+5025, U+502c, U+502e, U+507e, U+50a7, U+51bc, U+5452, U+54cc, U+54de, U+5533, U+553f, U+5549, U+5581, U+55be, U+560f, U+561e, U+564c, U+5768, U+57a1, U+5807, U+5889, U+5a67, U+5ad8, U+5af1, U+5b16, U+5cb5, U+5cbf, U+5d1e, U+5d9d, U+5e14, U+5edb, U+5f9c, U+6019, U+601b, U+602b, U+6126, U+614a, U+6206, U+6266, U+62ca, U+646d, U+64ba, U+6634, U+6677, U+668c, U+6753, U+67b5, U+6901, U+695d, U+6966, U+6978, U+69b1, U+6aa9, U+6b9b, U+6ce0, U+6d2e, U+6d33, U+6e11, U+6ec1, U+6f8d, U+705e, U+7110, U+712f, U+7145, U+7178, U+72ef, U+72f2, U+72f7, U+7322, U+73f2, U+748e, U+74f4, U+7519, U+7583, U+75b4, U+75f1, U+76cd, U+7726, U+7817, U+7839, U+7a80, U+7b04, U+7c9c-7c9d, U+7ca2, U+7d05, U+7d9d, U+7db2, U+7e3b, U+7e7b, U+7ef2, U+7f07, U+7f12, U+7f2f, U+7f31, U+7f58, U+7f5f, U+7f71, U+7f74, U+7f7e, U+7fa7, U+7fb0, U+8012, U+80b7, U+80c2, U+80fc, U+8118, U+815a, U+8166, U+81bb, U+81df, U+81e8, U+8228, U+827d, U+828a, U+82a4, U+8314, U+834f, U+8360, U+837d, U+83bc, U+83f9, U+83fd, U+840b, U+8411, U+8418, U+844e, U+846d, U+853b, U+85a8, U+85b9, U+8605, U+8616, U+86ac, U+86b6, U+86cf, U+8709, U+8723, U+8763, U+877d, U+87ac, U+87af, U+881b, U+887d, U+887f, U+88c9, U+88ce, U+88e1, U+88fc, U+892b, U+8a8d, U+8bfc, U+8de3, U+8deb, U+8e2f, U+8e70, U+8e85, U+8f15, U+9069, U+90fe, U+91a3, U+91b5, U+943e, U+948b-948c, U+9495, U+94a3, U+94ad, U+94cd, U+94f3, U+9517, U+9546, U+955b, U+955e, U+956b, U+9649, U+965f, U+96b3, U+96d6, U+97eb, U+988e, U+9ab1, U+9acc, U+9ad1, U+9b48, U+9ca0, U+9cd4, U+9cda, U+9ce2, U+9e2b, U+9e36, U+9eb8, U+9f17, U+9f19;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.29.woff2) format('woff2');
+ unicode-range: U+4eeb, U+506c, U+510b, U+5456, U+54d9, U+55b1, U+562c, U+567b, U+56af, U+581e, U+586c, U+5880, U+5ad2, U+5b32, U+5c25, U+5ca3, U+5d24, U+5d5b, U+5d5d, U+5d6f, U+5e0f, U+5e5b, U+5e80, U+5eb9, U+60b1, U+61b7, U+6217, U+6225, U+6339, U+6369, U+636d, U+6535, U+656b, U+66db, U+66e9, U+670a, U+6864, U+696e, U+69d4, U+6a18, U+6b39, U+6c5c, U+6c86, U+6cd4, U+6ceb, U+6cee, U+6cf6, U+6d7c, U+6e16, U+6e54, U+6e98, U+6ea7, U+6fb6, U+6fde, U+7023, U+7085, U+70b1, U+70bb, U+7173, U+71f9, U+72b8, U+72cd, U+730a, U+7317, U+738e, U+73a2, U+7477, U+74e0, U+752f, U+753e, U+7540, U+75a0, U+75b3, U+75e7, U+7654, U+76b4, U+76f1, U+7707, U+7743, U+7765, U+778b, U+77bd, U+77c7, U+7800, U+781c, U+7856, U+78d9, U+7955, U+7987, U+79eb, U+7a78, U+7aa8, U+7aad, U+7ab3, U+7b47, U+7baa, U+7bc1, U+7be6, U+7bef, U+7c7c, U+7cc7, U+7d04, U+7d44, U+7d71, U+7de9, U+7e8c, U+7ee8, U+7f21, U+7f23, U+8080, U+80ad, U+80d9, U+823e, U+8291, U+82ca, U+83a9-83aa, U+83d8, U+8451, U+845a, U+848c, U+84fc, U+8556, U+8629, U+863c, U+866e, U+868d, U+86b0, U+86f2, U+87bd, U+8844, U+88bc, U+88e3, U+890a, U+8930, U+89ba, U+89c0, U+8acb, U+8b1d, U+8c35, U+8d40, U+8e49, U+8f49, U+8f6b, U+8f8a, U+8f9a, U+8fd3, U+8fd5, U+9004, U+9011, U+902d, U+902f, U+9044, U+904b, U+90b0, U+911e, U+9143, U+9150, U+918d, U+91ad, U+928e, U+9487, U+948e, U+9494, U+94ab, U+94af, U+94cb, U+94d2, U+94ef, U+950a, U+951b-951c, U+9531, U+953c, U+953f, U+960a, U+96b1, U+96b9, U+96e2-96e3, U+9794, U+9838, U+9987, U+9a7a, U+9a7d, U+9ac0, U+9b1f, U+9b88, U+9c83, U+9c9a, U+9cc7, U+9cd9, U+9e3a, U+9e48, U+9e6a, U+9e6e, U+9e71, U+9e7e, U+9e87, U+9ee7;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.30.woff2) format('woff2');
+ unicode-range: U+4ee1, U+4f1b, U+4f89, U+4fdc, U+50ec, U+523f, U+5423, U+54cf, U+54ff, U+5522, U+55b9, U+5793, U+57b4, U+59a3, U+59dd, U+5b65, U+5c15, U+5c3b, U+5c9c, U+5d26, U+5d6b, U+5f58, U+609d, U+60ab, U+6434, U+6484, U+6549, U+65c4, U+65d2, U+65f0, U+6661, U+669d, U+66be, U+674c, U+676a, U+67d9, U+680c, U+6874, U+6939, U+698d, U+69e0, U+6a65, U+6a8e, U+6aa0, U+6b84, U+6b8d, U+6bb3, U+6c19, U+6da0, U+6e2b, U+6e53, U+6e8f, U+6eb2, U+6ef9, U+6f2f, U+717a, U+7228, U+72fa, U+7321, U+734d, U+7457, U+74a9, U+74ff, U+7513, U+754b, U+76a4, U+76b2, U+7719, U+772c, U+775a, U+7818, U+782c, U+7847, U+786d, U+78ba, U+78f4, U+7946, U+794e, U+7962, U+79ed, U+7a40, U+7a4d, U+7a86, U+7aac, U+7b4c, U+7b72, U+7ccc, U+7d0d, U+7d39, U+7dad, U+7dda, U+7e2e, U+7e54, U+7ee1, U+7f0c, U+7f11, U+7f27, U+7f68, U+7fa9, U+7fbc, U+7fd2, U+7fe5, U+809c, U+80e9, U+8108, U+8114, U+8139, U+8182, U+822f, U+825a, U+825f, U+82b4, U+82d2, U+8315, U+832d, U+8348, U+8366, U+8378, U+83a8, U+83b3, U+83e1, U+83ea, U+83f0, U+845c, U+84a1, U+84b4, U+84cd, U+8579, U+8585, U+85c1, U+8627, U+877e, U+87e5, U+885b, U+89da, U+8a3e, U+8a71, U+8c02, U+8c33, U+8c47, U+8c49, U+8ca2, U+8d49, U+8db5, U+8dd6, U+8dec, U+8df6, U+8e1f, U+8e40, U+8e53, U+8edf, U+8f82, U+8fa6, U+9023, U+9054, U+9078, U+907a, U+90b3, U+9139, U+917d, U+9190, U+9224, U+9490, U+94bd, U+94cc, U+94d1, U+9507, U+950d, U+9513-9514, U+9516, U+9518, U+951d-951e, U+952a, U+952c, U+9544-9545, U+9553, U+956a, U+956c, U+9580, U+9589, U+961a, U+97b2, U+97ff, U+9810, U+9867, U+986f, U+98cf, U+9a98, U+9adf, U+9b46, U+9c94, U+9ca5, U+9cb5, U+9cb7, U+9e32, U+9e38, U+9efc;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.31.woff2) format('woff2');
+ unicode-range: U+4ef5, U+4f74, U+4f91, U+50ba, U+5240, U+5261, U+5282, U+53fb, U+5416, U+5432, U+5459, U+54d3, U+5769, U+577c, U+57a7, U+5844, U+58bc, U+5981, U+5a08, U+5adc, U+5aeb, U+5b53, U+5c63, U+5cbd, U+5db7, U+5def, U+5ee8, U+5fbc, U+5fc9, U+6003, U+600d, U+603f, U+609b, U+6222, U+623d, U+63ce, U+6603, U+6769, U+6798, U+67a8, U+67f0, U+680a, U+6855, U+686b, U+6877, U+68f9, U+68fc, U+6b37, U+6b43, U+6bfd, U+6c06-6c07, U+6cad, U+6d07, U+6de0, U+6f4b, U+6f8c, U+70c0, U+71e0, U+7301, U+731e, U+7352, U+73c9, U+74ba, U+750f, U+754e, U+7594, U+760c, U+7630, U+77ef, U+7811, U+783c, U+78a5, U+78b2, U+78b6, U+78f2, U+794f, U+7967, U+79d5, U+7ac5, U+7b46, U+7ba8, U+7c21, U+7c40, U+7c64, U+7c8b, U+7ccd, U+7cd7, U+7ce8, U+7d61, U+7d66, U+7df4, U+7e3d, U+7e9b, U+7ebb, U+7f0b, U+7f0d, U+7f9d, U+800b, U+801c, U+806c, U+8167, U+81bd, U+8233-8234, U+8268, U+8288, U+82c8, U+8351, U+83b6, U+8401, U+8406, U+842c, U+8473, U+8476, U+8478, U+84ca, U+8564, U+8570, U+85b7, U+86b5, U+877b, U+878b, U+8793, U+87f2, U+88b4, U+8919, U+898f, U+8a08, U+8a13, U+8a2d, U+8a66, U+8a9e, U+8aa4, U+8b02, U+8b58, U+8b70, U+8b77, U+8b80, U+8b93, U+8c2e, U+8c3f, U+8c42, U+8c73, U+8c98, U+8c9d, U+8cc7, U+8dbc, U+8dfd, U+8f7e, U+8f8b, U+9060, U+90dc, U+9129, U+918c, U+91cb, U+94d9, U+950e, U+952b, U+953e, U+9554, U+9557, U+955d, U+966c, U+96a8, U+96b0, U+96fb, U+9708, U+97ac, U+9805, U+983b, U+9852, U+9878, U+989f, U+98a1, U+9a90, U+9a96, U+9aba, U+9af9, U+9b06, U+9c15, U+9c3d, U+9c56, U+9c67, U+9c72, U+9c8c, U+9cad, U+9cb3, U+9cd0, U+9ce1, U+9d70, U+9e2e, U+9e3b, U+9e47, U+9e4b, U+9e5b, U+9e63, U+9eb4, U+9ed2, U+9ee5;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.32.woff2) format('woff2');
+ unicode-range: U+4f7e, U+5107, U+5281, U+54da, U+56dd, U+5709, U+572f, U+5739, U+574c, U+577b, U+5786, U+57d2, U+57da, U+5819, U+584d, U+5c22, U+5c99, U+5e3b, U+5f56, U+5f82, U+6083, U+60dd, U+615d, U+6243, U+6420, U+6426, U+6499, U+661d, U+67fd, U+6832, U+68f0, U+691f-6920, U+6a28, U+6aab, U+6bf5, U+6c3d, U+6c94, U+6d0e, U+6d4d, U+6eb1, U+6eb7, U+6ebd, U+6f36, U+727e, U+72b4, U+72c1, U+72f4, U+7331, U+739f, U+73d9, U+75ac, U+76e1, U+7722, U+773e, U+7780, U+77fb, U+781f, U+78fb, U+7905, U+790c, U+790e, U+7953, U+7a69, U+7b5a, U+7bc4, U+7c9e, U+7cab, U+7d1a, U+7d55, U+7d5c, U+7e7c, U+7eae, U+7ec1-7ec2, U+7f0f, U+7f1e, U+7f35, U+7fd9, U+8071, U+80ec, U+8129, U+812b, U+8148, U+8173, U+819a, U+81a0, U+81bf, U+81e5, U+822d, U+824b, U+8298, U+8300, U+831b, U+8347, U+835c, U+83dd, U+83e5, U+840f, U+841c, U+8449, U+84cb, U+84da, U+8548, U+857b, U+8591, U+85da, U+85f4, U+8667, U+86ba, U+86f8, U+8731, U+8753, U+8770, U+8856, U+88fd, U+895e, U+897b, U+89c7, U+89cb, U+8a0e, U+8a18, U+8a31, U+8c8a, U+8c94, U+8caa, U+8cac, U+8d52, U+8d5f, U+8d91, U+8db1, U+8e2c, U+8e30, U+8e9e, U+8eca, U+8f09, U+8fee, U+8ff4, U+9031, U+908a, U+90a0, U+90bd, U+90d7, U+90ff, U+9117, U+915e, U+9161, U+9164, U+91a1, U+932f, U+936c, U+93ae, U+9486, U+94c8, U+94ca, U+94d6-94d7, U+94e6, U+954e, U+9560-9561, U+9568, U+95b1, U+9607, U+9654, U+9673, U+9678, U+9688, U+968e, U+96aa, U+96d9, U+96dc, U+96f0, U+975c, U+985f, U+9871, U+9899, U+9902, U+9918, U+9a5a, U+9a80, U+9a8e, U+9a99, U+9a9d, U+9aeb, U+9aee, U+9b18, U+9b8a, U+9ba0, U+9bae, U+9c47, U+9cb4, U+9cbd, U+9cdc, U+9d87, U+9e4e, U+9e88, U+9efb, U+9f29, U+9f8d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.33.woff2) format('woff2');
+ unicode-range: U+5233, U+5293, U+537a, U+5523, U+5588, U+5686, U+57b8, U+57dd, U+57e4, U+57ef, U+57f8, U+5881, U+5ab5, U+5e5e, U+5ed1, U+5fee, U+6067, U+620b, U+62f6, U+638a, U+63e0, U+641b, U+6445, U+6509, U+652e, U+6534, U+67d2, U+67dd, U+6833, U+6883, U+6a7c, U+6a97, U+6b82, U+6cd0, U+6cfa, U+72b0, U+72f3, U+741a, U+7610, U+7617, U+764d, U+771a, U+7787, U+778d, U+77e7, U+784f, U+7881, U+78c9, U+7919, U+7986, U+798a, U+79fe, U+7a13, U+7a1c, U+7b90, U+7b9c, U+7bac, U+7bcc, U+7be0, U+7c0b, U+7c0f, U+7c8e, U+7caf, U+7cde, U+7d77, U+7dae, U+7dca, U+7e20, U+7e94, U+7ed0, U+7fee, U+8035, U+804d, U+8072, U+807d, U+8112, U+811e, U+8158, U+81a9, U+81ac, U+81af, U+81cd, U+8201, U+8208, U+8256, U+8306-8307, U+8332, U+83c3, U+83e7, U+83ef, U+8490, U+8497, U+84a8, U+84b9, U+84c1, U+84d0, U+84e3, U+84e5, U+855e, U+85ed, U+865f, U+8729, U+873e, U+8765, U+889d, U+88aa, U+88d2, U+8907, U+8914, U+8966, U+89cf, U+89eb, U+89f8, U+8a72-8a73, U+8ac7, U+8ae1, U+8af8, U+8b5e, U+8b89, U+8c1e, U+8c2b, U+8c68, U+8c85, U+8c93, U+8ca0, U+8ca9, U+8cb4, U+8cbb-8cbc, U+8d59, U+8e41, U+8e60, U+8e6f, U+8e7b, U+8e90, U+8f36, U+8faf, U+8ffb, U+9079, U+9097, U+90e4, U+90eb, U+91c6, U+91d0, U+934f, U+93af, U+942e, U+94ac, U+94b8, U+94d5, U+94df, U+94eb, U+94f7, U+955f, U+962f, U+963c, U+9660, U+9674, U+969b, U+96de, U+96e9, U+9728, U+972a, U+9748, U+9806, U+9817, U+984f-9850, U+9883, U+98db, U+98ef, U+9978, U+997e, U+9998, U+9a69, U+9aa2, U+9b31, U+9b5f, U+9b9f, U+9c8f-9c90, U+9c95, U+9ca6, U+9ca9, U+9cbb, U+9cbf, U+9cc8, U+9cd1, U+9cf4, U+9dc9, U+9ddf, U+9e30, U+9ea5, U+9ebf, U+9edf, U+9ef9, U+9f02, U+9f82;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.34.woff2) format('woff2');
+ unicode-range: U+4ec2, U+4edd, U+5155, U+551b, U+564d, U+572c, U+576d, U+57a4, U+57cf, U+57d5, U+57d8, U+57ed, U+57f4, U+580d, U+5820, U+593c, U+59a4, U+5c66, U+5fed, U+619d, U+63f8, U+64d0, U+67c1, U+6844, U+6910, U+6c46, U+6c54, U+6d2b, U+6ecf, U+721d, U+72c3, U+7339, U+73e7, U+7481, U+7625, U+7633, U+7635, U+7643, U+76e4, U+7704, U+770a, U+770d, U+7843, U+78fe, U+7913, U+7942, U+799b, U+7b74, U+7b78, U+7c33, U+7d00, U+7d2c, U+7d41-7d42, U+7d72, U+7d9c, U+7db1, U+7de1, U+7e78, U+7e96, U+7ea9, U+7ecb, U+7ed6, U+7f33, U+7f3b, U+7fdb, U+805e, U+80e0, U+812c, U+8160, U+8169, U+81ab, U+81ae, U+81c5, U+81c9, U+81cc, U+8204, U+8209, U+830c, U+8316, U+8477, U+84bd, U+84ee, U+8500, U+850c, U+850e, U+852f, U+857a, U+857f, U+85a4, U+8607, U+860b, U+8661, U+8701, U+8766, U+8798, U+87b5, U+87eb, U+8803, U+880b, U+8886, U+888a, U+8893, U+889b, U+88dd, U+89a9, U+8a09, U+8a22, U+8a55, U+8a5e, U+8a7e, U+8a8c, U+8b34, U+8b39, U+8b9f, U+8bea, U+8c90, U+8c99, U+8d06-8d07, U+8d33, U+8d36, U+8d55, U+8da8, U+8dbd, U+8e50, U+8e68, U+8e9c, U+8f14, U+8f33, U+8f4e, U+8f79-8f7a, U+8f80, U+8fb2, U+90a1, U+90b4, U+90be, U+90c4, U+9172, U+917a, U+9240-9241, U+9280, U+92a7, U+92ec, U+9304, U+934b, U+9369, U+93b0, U+9418, U+9451, U+94b2, U+94d3, U+94ea, U+9628, U+963d, U+9663, U+968a, U+96f2, U+9705, U+9711, U+9766, U+9770, U+9778, U+97a1, U+97ae, U+9818, U+982b, U+9857, U+992c, U+9979, U+99ee, U+9a03, U+9a75, U+9a83, U+9ac6, U+9b02, U+9b32, U+9ba1, U+9ba3, U+9bd4, U+9bee, U+9c1c, U+9c21, U+9c89, U+9c9e, U+9cc0, U+9d25, U+9d73, U+9e0a, U+9e61, U+9e7c-9e7d, U+9e84, U+9f2f, U+9f37, U+9f7e, U+9f81, U+9fa0;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.35.woff2) format('woff2');
+ unicode-range: U+553c, U+575c, U+576b, U+5c88, U+605d, U+6343, U+67a7, U+6980, U+6d27, U+6ee0, U+6f72, U+6f89, U+750d, U+7615, U+772d, U+7752, U+777a, U+77a2, U+7871, U+791e, U+796b, U+798d, U+79bf, U+7aa9, U+7b30, U+7b4d, U+7b96, U+7ba6, U+7bda, U+7be5, U+7c65, U+7c8c, U+7c9a, U+7d14, U+7d19, U+7d24, U+7d45, U+7d7c-7d7d, U+7de3, U+7e31, U+7e6b, U+7e81, U+7ee0, U+7f3d, U+7f63, U+7f7d, U+7fb6, U+7fe7, U+7ff9, U+8016, U+8027, U+8031, U+8056, U+805b, U+806d, U+806f, U+8077, U+808f, U+812e, U+81a6, U+81b6, U+81b9, U+81cf, U+81dc, U+8216, U+8221, U+8308, U+8310, U+833c, U+8396, U+83a4, U+83d1, U+8429, U+844c, U+8470, U+8545, U+8599, U+8652, U+871e, U+8764, U+8797, U+879d, U+885d, U+88a3, U+88a7, U+88c8, U+89cc-89cd, U+89d4, U+8a04, U+8a0a, U+8a17, U+8a19, U+8a62, U+8a96, U+8a98, U+8ab2, U+8af9, U+8b3f, U+8c50, U+8c6c, U+8c8f, U+8ca7, U+8cb7, U+8cc8, U+8ce6, U+8cf4, U+8d05, U+8d46-8d47, U+8dd0, U+8e23, U+8e45, U+8e5f, U+8e84, U+8ebc, U+8ecc, U+8f13, U+8f38, U+8fbb, U+8fef, U+903f, U+9046, U+9058, U+9072, U+90b2, U+90b6, U+90c7, U+90d5, U+90d9, U+911a, U+912c, U+9156, U+9179, U+9185, U+91e4, U+9226, U+9264, U+92b3, U+92f5, U+92f9, U+9375, U+93ad, U+9423, U+943b, U+9498, U+94cf, U+94da, U+94fc, U+9559, U+9569, U+9571, U+9574, U+9592, U+959f, U+95a4, U+95ae, U+95c6-95c7, U+9618, U+9641, U+9667, U+96bb, U+97fb, U+9863, U+9869, U+98a5, U+98d1, U+98d7, U+98fd, U+9917, U+994b, U+99ac, U+99da, U+9a3e, U+9a95, U+9b4b, U+9b80, U+9b84, U+9bc6, U+9bd2, U+9bdd, U+9c01, U+9c28, U+9c32, U+9c64, U+9c6f, U+9c75, U+9c99, U+9cc1, U+9cd3, U+9cd8, U+9e40, U+9e79, U+9e91, U+9ee8, U+9f41, U+9f52, U+9f61;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.36.woff2) format('woff2');
+ unicode-range: U+4ec9, U+4ef3, U+5290, U+54d5, U+552a, U+5eb3, U+5ed2, U+640b, U+681d, U+6baa, U+6c15, U+6cd6, U+6d1a, U+6ebb, U+6ed7, U+7039, U+728b, U+75e6, U+76c7, U+76e3, U+7730, U+7733, U+7735, U+774f, U+7793, U+77d4, U+77de, U+785a, U+7895, U+7921, U+7926, U+7954, U+796a, U+797c, U+798b, U+7998, U+79f5, U+7a03, U+7a48-7a4a, U+7b1f, U+7b39, U+7b45, U+7b58, U+7b62, U+7ba0, U+7be9, U+7bf8, U+7c3e, U+7cc8, U+7d6a, U+7d8e, U+7dd2, U+7ef9, U+7f76, U+7f91, U+7fc0, U+7fc3, U+8029, U+80f2, U+8105, U+8144, U+81ad, U+81b5, U+81ce, U+81d1-81d2, U+81fa, U+8232, U+825e, U+82fe-82ff, U+833a, U+839b, U+83be, U+83cd, U+83e2, U+8459, U+8474, U+84b7, U+84bc, U+8502, U+8538, U+8557, U+8561, U+85bf, U+85de, U+873a, U+8758, U+875f, U+87ec, U+8852, U+8889, U+8891, U+88a0, U+88a9, U+8955, U+8962, U+89dd, U+89f1, U+8a02, U+8a12, U+8a1a, U+8b1b, U+8b3a, U+8b62, U+8b9d, U+8bd0, U+8c09, U+8c9e, U+8caf, U+8ce3, U+8ce8, U+8cf8, U+8cfc, U+8d95, U+8da5, U+8da9, U+8dcd, U+8dd3, U+8e64, U+8e94, U+8ecd, U+8ef8, U+8eff, U+8f58, U+8f75, U+900c, U+904a, U+9055, U+905e, U+90bf, U+90d0, U+9109, U+9130, U+918a, U+91bf, U+91d8, U+9227-9229, U+92fc, U+93f0, U+9413, U+9481, U+953d, U+9548, U+955a, U+9583, U+95b7, U+95c5, U+95ca, U+9683, U+96d4, U+971a, U+9793, U+97e5, U+9802-9803, U+9809, U+9820, U+98e2, U+9951, U+9958, U+9982, U+99f5, U+99f8, U+9a40, U+9a45, U+9a9f, U+9aaf, U+9ad2, U+9ae4, U+9b0f, U+9b1b, U+9b5a, U+9bbb, U+9c09, U+9c2a, U+9c65, U+9c7e, U+9c84, U+9c8a, U+9c9d, U+9ca3, U+9cc6, U+9cc9, U+9ce4, U+9cf0, U+9d2b, U+9d31, U+9d8e, U+9e5f, U+9e97, U+9ec9, U+9eea, U+9ef4, U+9f9c, U+9fa4;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.37.woff2) format('woff2');
+ unicode-range: U+522d, U+525e, U+54dc, U+5f61, U+6322, U+638e, U+63de, U+63f2, U+6971, U+6a91, U+6c0d, U+7303, U+75d6, U+7605, U+760a, U+763c, U+770e, U+7725, U+772b, U+7746, U+774a, U+775e, U+776a, U+77bc, U+7822, U+7832, U+7841, U+78bc, U+798e, U+7991, U+79a6, U+79ec, U+7a05, U+7a16, U+7a1f, U+7a6a, U+7a8b, U+7ac7, U+7b07, U+7b66, U+7b70, U+7b85, U+7ba2, U+7bc2, U+7c30, U+7c60, U+7ca1, U+7ca3, U+7ca9, U+7cba, U+7cc0, U+7d5b, U+7d96, U+7da0, U+7ddb, U+7de8, U+7e21, U+7e2b, U+7e3f, U+7e50, U+7f0a, U+7feb, U+8060, U+8074, U+8085, U+812d, U+8159, U+820a, U+8246, U+8248, U+8337, U+8345, U+83c9, U+83f5, U+8487, U+84be, U+84c7, U+84cf, U+84e0, U+84f0, U+84f4, U+8514, U+851f, U+855a, U+85b3, U+85db, U+8606, U+862d, U+866f, U+86a2, U+86e3, U+877f-8780, U+87ed, U+8883, U+889a, U+889e, U+88cf, U+890b, U+8927, U+892f, U+89aa, U+89d6, U+8a34, U+8a63, U+8b26, U+8b95, U+8b9a, U+8bac, U+8ca1, U+8cee, U+8d0f, U+8d20, U+8d57, U+8de1, U+8dfc, U+8e10, U+8e21, U+8e26, U+8e7e, U+8ec5, U+8ed3, U+8f3e, U+905d, U+9061, U+906f, U+9086, U+90cb, U+911c, U+9126, U+9142, U+9147, U+914e, U+9174, U+919c, U+91d9, U+9244-9245, U+924f, U+92b7, U+9306, U+930f, U+931e, U+938c, U+940f, U+9468, U+94b7, U+94e5, U+956e, U+9572, U+95a3, U+95b6, U+95c9, U+9613, U+961b, U+965e, U+9684, U+96ee, U+9749, U+9763, U+9779-977a, U+977f, U+97a8, U+97f0, U+97f2, U+9801, U+98d6, U+98e9, U+98ed, U+9916, U+99f0, U+9a3b, U+9a5f, U+9ae3, U+9af3, U+9b7e, U+9bd5, U+9c92, U+9caa, U+9caf, U+9d95, U+9dba, U+9dc3, U+9e02, U+9e6f, U+9e83, U+9e86, U+9e90, U+9e95, U+9e9a, U+9e9c, U+9ea8, U+9eb9, U+9f22, U+9f31, U+9f67, U+9f6e, U+9f78, U+9f7b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.38.woff2) format('woff2');
+ unicode-range: U+5181, U+5e31, U+6224, U+6bf3, U+75b0, U+75c4, U+76e6, U+7744, U+7786, U+78bb, U+78dc, U+78e1, U+7904, U+79a3, U+79b1, U+79f1, U+7a94, U+7add, U+7b2d, U+7b4a, U+7b7c, U+7bc9, U+7bf0, U+7c8a, U+7c8f, U+7cf7, U+7d17, U+7d1b, U+7d2e, U+7d43, U+7d6b, U+7d7a, U+7d7f, U+7d88, U+7dbc, U+7dbf, U+7def, U+7e98, U+7f32, U+7fba, U+7fc9, U+7fec, U+8022, U+80f5, U+8126-8127, U+813a, U+816a, U+817d, U+81c7, U+81cb, U+81d0, U+81d3, U+81e2, U+8266, U+8296, U+82e0, U+82e7, U+831a, U+831d, U+8323, U+8344, U+83d2, U+83f4, U+844d, U+845e, U+846f, U+847b, U+8489, U+84e1, U+84ef, U+8523, U+8526, U+855d, U+85d9, U+85ec, U+8698, U+86da, U+86ef, U+870f, U+8714, U+8740, U+877a, U+8795, U+87a3, U+87d3, U+87fb, U+8836, U+88a5, U+88c0, U+894d, U+8972, U+8997, U+89dc, U+89fc, U+89ff, U+8a5d, U+8a65, U+8a67, U+8a69, U+8a7c, U+8aa5, U+8add, U+8ae5, U+8b31, U+8b5f, U+8b9e, U+8c40, U+8c8d, U+8ca8, U+8cc0, U+8cf2, U+8da7, U+8dc2, U+8dc9, U+8e18, U+8e27, U+8e77, U+8e8d, U+8ed2, U+8f0b, U+8f2a, U+8f8c, U+8f92, U+8fb5, U+8fbc, U+8fcf, U+9059, U+9085, U+9089, U+90de, U+90ea, U+9118, U+9120, U+9136, U+9141, U+917e, U+91a8, U+91b2, U+91c0, U+9207, U+920d, U+923e-923f, U+92ca, U+92fe, U+932b, U+934a, U+93d8, U+9407, U+9483, U+94de, U+94fb, U+94fd, U+9558, U+9597, U+95c0, U+95c4, U+96a4, U+96da, U+96df, U+9727, U+979a, U+97cc, U+97fa, U+980d-980e, U+9828, U+9835, U+984d, U+985d, U+986b-986c, U+98d4, U+9908, U+99a7, U+9a92, U+9aff, U+9b0b, U+9b8d, U+9bbc, U+9be1, U+9cb9, U+9ce3, U+9d03, U+9d23, U+9d26, U+9d3f, U+9d9d, U+9de3, U+9e80, U+9e89-9e8a, U+9ea3-9ea4, U+9eaf, U+9f08, U+9f36, U+9f4b, U+9f4f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.39.woff2) format('woff2');
+ unicode-range: U+4f67, U+63ad, U+67c3, U+6bf9, U+6ca9, U+6cb2, U+7338, U+76dc-76dd, U+7739, U+7756, U+77dd, U+77f0, U+7859, U+78e5, U+78eb, U+794b, U+7966, U+796e, U+799c, U+79a0, U+79ab-79ac, U+7a02, U+7a1b, U+7ada, U+7af6, U+7b16, U+7b27, U+7baf, U+7bbe, U+7be4, U+7bf2, U+7c22, U+7c37, U+7c3b, U+7c4c, U+7c53, U+7c8d, U+7c90, U+7ca6, U+7cad, U+7ce2, U+7cf0, U+7cf5, U+7d03, U+7d16, U+7d29, U+7d35, U+7d59, U+7d8d, U+7e15, U+7e5f, U+7e68, U+7e7a, U+7e84, U+7f4b, U+7f77, U+7fc2, U+7fdc, U+8066, U+80ca, U+811d, U+8130, U+8136, U+81b0, U+81b2, U+8274, U+8283, U+82d8, U+82fd, U+830a, U+83bf, U+83c2, U+83c6, U+83eb, U+8466, U+849e, U+84de, U+84fa, U+8542, U+85a2, U+85a6, U+85be, U+85d7, U+85e0, U+85e7, U+85f7, U+879e, U+8806, U+883b, U+8880, U+8890, U+88b5, U+88ef, U+8931-8932, U+8935, U+8946, U+8971, U+8985, U+898d, U+8a0c, U+8a1b, U+8a2a, U+8a64, U+8a7f, U+8ac4, U+8b53, U+8b5c, U+8b8f, U+8c48, U+8c4e, U+8ce2, U+8cf9, U+8da6, U+8dc5, U+8dca, U+8e06, U+8e3a, U+8e54, U+8ec8, U+8ece, U+8ed0, U+8f6a, U+8ffa, U+9077, U+9087, U+9098, U+9124, U+9133, U+9166, U+91b0, U+91be, U+91db, U+9223, U+9231, U+9236, U+935b, U+9366, U+93cf, U+9435, U+9455, U+945f, U+94b6, U+94d4, U+9533, U+9564-9566, U+959b, U+95af, U+95ba-95bb, U+95d2, U+9659, U+9682, U+96b8, U+972e, U+9733, U+980c, U+9830, U+9846, U+9851, U+986a, U+988b, U+98bc, U+98fc, U+9905, U+9926, U+99d5, U+99dd, U+9a4c, U+9a58, U+9b81, U+9ba8, U+9c20, U+9c39, U+9c63, U+9c97, U+9cbc, U+9d28, U+9d2a, U+9d40, U+9d72, U+9d84, U+9d92, U+9d97, U+9d9c, U+9d9f, U+9de5, U+9de7, U+9df1-9df2, U+9df9, U+9e4d, U+9e53, U+9e96, U+9f44, U+9f4a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.40.woff2) format('woff2');
+ unicode-range: U+74de, U+7706, U+7760, U+7790, U+77ab, U+77c5, U+77ca, U+77d8, U+77da, U+77e1, U+787d, U+7883, U+78ff, U+7908, U+791c, U+7983, U+79d4, U+79f2, U+7a7b, U+7aae, U+7ac4, U+7b17, U+7b87, U+7b98, U+7bbd, U+7c0d, U+7c1c, U+7c42, U+7c50, U+7cb7, U+7d4f, U+7d68, U+7d79, U+7d91, U+7dcc, U+7df7, U+7dfb, U+7e3e, U+7e49, U+7e59, U+7e95, U+7f41, U+7f85, U+7f87, U+7fd0, U+7fef, U+8008, U+800e, U+8063, U+8070, U+8119, U+811b, U+8137, U+813b-813c, U+8157, U+8195, U+81d8, U+81db, U+8250, U+825c, U+8277, U+82d9, U+839a, U+840a, U+8417, U+8458, U+8462, U+8479, U+84c2, U+8525, U+8532, U+858b, U+85cd, U+85d8, U+85dd, U+863f, U+86ec, U+86f7, U+8711, U+8781, U+879a, U+87a4, U+883e, U+8842, U+884b, U+8887, U+888c, U+8894, U+88a6, U+88a8, U+88bf, U+88f2, U+8982, U+8a03, U+8a0b, U+8a15, U+8a1d, U+8a60, U+8a6b-8a6c, U+8a6e, U+8a7b, U+8aa0, U+8ab3, U+8ac6, U+8b2c, U+8b43-8b44, U+8b6f, U+8b7d, U+8bb1, U+8cdc, U+8cf0, U+8d08, U+8dae, U+8e63, U+8e71, U+8ec3, U+8ed9, U+8ee0-8ee2, U+8f29, U+8f5d, U+8fad, U+905c, U+90c0, U+90c8, U+90f5, U+9127, U+912b, U+9137, U+913f-9140, U+91e1-91e2, U+9243, U+9250, U+92b6, U+92d0, U+92f8, U+9310, U+934d-934e, U+9367, U+937c, U+9396, U+93e6, U+9496, U+9575, U+95ad, U+95c3, U+95e2, U+9657, U+967c, U+976d, U+9797, U+97c8, U+97f1, U+9839, U+984e, U+9858, U+9873, U+9901, U+9903, U+9931, U+9935, U+9989, U+99ae, U+99b3, U+99db, U+9a0e, U+9a19, U+9a3a, U+9a4a, U+9a59, U+9aab, U+9ab3, U+9ab9, U+9ae0, U+9ae5, U+9bd9-9bda, U+9c1f, U+9c49, U+9cd2, U+9cdb, U+9d1f, U+9d2e, U+9d32, U+9d37, U+9da1, U+9df7, U+9e00, U+9e8e, U+9ea1, U+9ea7, U+9f30, U+9f92;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.41.woff2) format('woff2');
+ unicode-range: U+54f3, U+589a, U+5c7a, U+640c, U+64d7, U+6957, U+6f24, U+728f, U+76d5, U+76e9, U+76eb, U+76fb, U+7716, U+771c, U+7795, U+77b7, U+77c4, U+77ce, U+77d9, U+781b, U+782e, U+7848, U+78e6, U+790b, U+7928, U+7943, U+7972, U+797b, U+79a2, U+79a5, U+7a06, U+7a2d, U+7a8a, U+7a8c, U+7aaa, U+7abc, U+7acf, U+7b48, U+7b7b, U+7b7d, U+7bf4, U+7bfc, U+7c25, U+7c3c, U+7c44, U+7c46-7c47, U+7c72, U+7cf4, U+7d0f, U+7d7e, U+7d9f, U+7db5, U+7ddc, U+7de0, U+7e22, U+7e4c, U+7e51-7e52, U+7e91, U+7eb4, U+7f48, U+7f75, U+7fda, U+8025, U+8030, U+805c, U+8067, U+807a, U+80a3, U+80bb, U+80d1, U+80d4, U+80fe, U+810e, U+811c, U+8128, U+81bc, U+81ee, U+8223, U+8255, U+8264, U+8267, U+82f2, U+82fc, U+8356, U+836c, U+83bb, U+8483, U+84e8, U+84f5, U+84fe, U+854c, U+8580, U+85c7, U+85e6, U+8640, U+8656-8657, U+8670, U+8688, U+8696, U+86e1, U+86fb, U+870c, U+870e, U+8728, U+875d, U+8779, U+87ff, U+8814, U+8819, U+882d, U+8837, U+887c, U+8897, U+890f, U+8926, U+8939, U+896c, U+8976, U+8990, U+89fd, U+8a1f, U+8a6f, U+8ab4, U+8ad3, U+8b0f, U+8b27, U+8b2a, U+8b41, U+8ca4, U+8d6a, U+8dd8, U+8e16, U+8e2b, U+8e7d, U+8ec6, U+8ec9, U+8edb, U+8f08, U+8f34, U+911b, U+9121, U+9168, U+9191, U+9196, U+92fb, U+9351, U+93aa, U+93c2, U+93c9, U+93d5, U+9430, U+945b, U+95d5, U+96ca, U+97a6-97a7, U+97c2, U+9853, U+98c6, U+98d0, U+994f, U+99f3, U+99f9, U+9a3d, U+9a44, U+9a4e, U+9a8d, U+9afc, U+9b10-9b11, U+9b56, U+9b71, U+9b8b, U+9bb0, U+9bbe, U+9bcb, U+9bcf, U+9c37, U+9cbe, U+9cfe, U+9d10, U+9d27, U+9d3e, U+9d83, U+9dab, U+9db2, U+9ded, U+9e3c, U+9e50, U+9f07, U+9f1e, U+9f24, U+9f46, U+9f5b, U+9f7a, U+9f7d, U+9f91;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.42.woff2) format('woff2');
+ unicode-range: U+570a, U+5776, U+727f, U+76de, U+7705, U+7759, U+77b5, U+77df, U+7863, U+78c8, U+78da, U+78e9, U+78ed, U+78f3, U+78f9, U+7900, U+7931, U+797f, U+79ae, U+79f6, U+7a0c, U+7a43, U+7a6b, U+7a85, U+7a87, U+7abe, U+7af7, U+7b23, U+7b6d, U+7ba3, U+7bc3, U+7c03, U+7c2c, U+7c2f, U+7c3a, U+7c93, U+7cb4, U+7cb6, U+7ce6, U+7d0b, U+7d13, U+7d5e-7d5f, U+7d82, U+7df2, U+7df9-7dfa, U+7e29, U+7e37, U+7e3c, U+7e46, U+7e55, U+7e5a, U+7e73, U+7f37, U+7f4d, U+7fe3, U+805d, U+805f, U+808a, U+8099, U+809e, U+81a5, U+81b1, U+81b4, U+81de, U+81ff, U+824e, U+82b5, U+82c3, U+82f6, U+830d, U+83ed, U+8456, U+849f, U+8573, U+85e3, U+85eb, U+8648, U+8659, U+8692, U+8710, U+872a, U+8755, U+881c, U+8895, U+88cb, U+88d3, U+88e9, U+890c, U+890e, U+896b, U+8988, U+8993, U+89ed, U+8a05-8a06, U+8a0f, U+8a3d, U+8a5f, U+8a68, U+8a6d, U+8a75, U+8a95, U+8aa1, U+8b54, U+8b7b, U+8b88, U+8bc7, U+8c6d, U+8c8e, U+8c91, U+8cbf, U+8cc4, U+8d99, U+8dac, U+8db7, U+8df0-8df1, U+8e25, U+8e4c, U+8e79, U+8e98, U+8f16, U+8f47, U+8f4b, U+8f55, U+8f81, U+8fc6, U+8fd2, U+9015, U+9024, U+90d8, U+9183-9184, U+91bc, U+9230, U+9291, U+92cb, U+92eb, U+9332, U+9354, U+936e, U+9378, U+93c1, U+93e2, U+93e4, U+93ed, U+9404, U+9428, U+9444, U+9463, U+9477, U+947d, U+94f9, U+95da, U+9622, U+9624, U+9638, U+972b, U+978e, U+979d, U+97d7, U+981e, U+9837, U+9909, U+9964, U+99c3, U+99c9, U+9a1b, U+9a20, U+9a61, U+9aea, U+9b16, U+9b1a, U+9b3f, U+9b8c, U+9bc1, U+9bdb, U+9c24, U+9c7b, U+9ce0, U+9cf3, U+9d09, U+9d30, U+9d3c, U+9d42, U+9d9a, U+9da2, U+9db3, U+9dc7, U+9deb, U+9e56, U+9e85, U+9ec7, U+9ecb, U+9ee1, U+9f57, U+9f62-9f63;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.43.woff2) format('woff2');
+ unicode-range: U+5865, U+6f2d, U+76cc, U+76e8, U+76ec, U+76ff, U+770c, U+7782, U+78d1, U+7945, U+79a1, U+79ad, U+79f9, U+7a8e, U+7ba5, U+7c15, U+7c2b, U+7c9b, U+7cbb, U+7cf1, U+7e02, U+7e5e, U+7ee4, U+7f46, U+7f88, U+7fc6, U+7fd1, U+8075, U+8135, U+81c4, U+81d6, U+8322, U+833d, U+8358, U+838a, U+83a2, U+83b5, U+83d5, U+8435, U+84bb, U+84db, U+84f7-84f8, U+850a, U+8518, U+851e, U+8534, U+8558, U+857c, U+8594, U+85d6, U+85e2, U+85f6, U+8601, U+8691, U+86e2, U+87ef, U+8804, U+8808, U+880e, U+8823, U+8825, U+88db, U+896a, U+8999, U+89a5, U+8a11, U+8a23, U+8a52, U+8a70, U+8a78, U+8ab0, U+8acf, U+8adb, U+8aee, U+8af1, U+8b25, U+8b28, U+8b6b, U+8c8b, U+8c9b, U+8cab, U+8cb2, U+8cd3, U+8cde, U+8d01-8d02, U+8d09, U+8da4, U+8daf, U+8db6, U+8dd4, U+8e34, U+8e46, U+8ef7, U+8f1d, U+8f30, U+8f3f, U+8f42, U+9081, U+90bc, U+912e, U+91df-91e0, U+91e3, U+91f1, U+9209, U+9219, U+9234, U+923a, U+9242, U+9254, U+928a, U+9298, U+92a6, U+92c5, U+92e4, U+92ed, U+9303, U+9308, U+9323, U+9328, U+9364, U+938b, U+9394, U+93c6, U+93d0, U+93f1, U+93fb, U+9416, U+9427, U+9433, U+9440, U+9462, U+9471, U+947e, U+9491, U+9543, U+95ac, U+95be-95bf, U+965c-965d, U+96ba, U+9720, U+9724, U+9729, U+976e, U+978f, U+9796, U+97e8, U+97fc-97fd, U+9812, U+9824, U+983a, U+9854, U+985b, U+98f3, U+98f8, U+9906, U+991a, U+9928, U+9945, U+9948, U+995c, U+995f, U+99d0, U+99e1, U+99f7, U+9a01, U+9a2b, U+9a37, U+9a3c, U+9a62, U+9ad5, U+9af4, U+9b5c, U+9bc2, U+9bc5, U+9c2b, U+9c57, U+9c7d, U+9cac, U+9d13, U+9d3b, U+9d86, U+9d8a, U+9db8, U+9df3, U+9dff, U+9e01, U+9e34, U+9e9e, U+9eff, U+9f0a, U+9f0f, U+9f1c, U+9f2b, U+9f66;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.44.woff2) format('woff2');
+ unicode-range: U+51b1, U+57b2, U+5c1c, U+5ddb, U+75c3, U+76e0, U+76f3, U+76fd, U+7703, U+770f, U+772e, U+7745, U+774d, U+7755, U+7767, U+779c, U+7844, U+7894, U+78a0, U+78a6, U+78ad, U+78b8, U+78bd, U+78c3, U+78de, U+78f8, U+78fd, U+7909, U+7918, U+792e, U+793d, U+7958, U+797e, U+798c, U+79a4, U+79cc, U+79d9, U+79e2, U+7a27, U+7a2c, U+7a32, U+7a38, U+7a5c, U+7ad2, U+7b00, U+7b65, U+7b76, U+7bec-7bed, U+7c18, U+7c34, U+7c52, U+7c54, U+7c5c, U+7c5e, U+7c63, U+7c76, U+7cc2, U+7cc9, U+7d23, U+7d4d, U+7da1, U+7db6, U+7dc4, U+7dd7, U+7dfc, U+7e01, U+7e06, U+7e0b, U+7e1c, U+7e1e, U+7e40, U+7e43, U+7e64, U+7e67, U+7e6c, U+7e83, U+7e89, U+7e92, U+7e97, U+7f6f, U+7f80, U+7f95, U+7fb5, U+8007, U+8034, U+806b, U+808d, U+8117, U+8143, U+8163, U+8168, U+8175, U+8197, U+819f, U+81ef, U+8226, U+8241-8242, U+824a, U+831e, U+83c4, U+8468, U+847e, U+8484, U+8488, U+8495, U+8498, U+84a7, U+84ad, U+84c3, U+84c6, U+84f3, U+8531, U+8541, U+8582, U+85d1, U+85ef, U+8614, U+8618, U+8706, U+8791, U+87e8, U+87fc, U+882a, U+885f, U+8911, U+8920, U+8956, U+8987, U+8a10, U+8a14, U+8a56-8a57, U+8a6a, U+8a87, U+8ac8, U+8ad1, U+8b1f, U+8b8c, U+8b99, U+8c3d, U+8c57, U+8c77, U+8c97, U+8ca3, U+8cef, U+8d0b, U+8d72, U+8e28, U+8e89, U+8eb1, U+8f00, U+8f17, U+8f53, U+8f77, U+8fcb, U+9013, U+913a, U+9173, U+91b1, U+91d4, U+922a, U+929d, U+92d5, U+9373, U+939a, U+9410, U+9434, U+9475, U+96a9, U+96d1, U+9718, U+9784, U+97c6, U+98ba, U+98ee, U+98f0, U+9907, U+9950, U+99bb, U+99de, U+9a27, U+9afd, U+9b36, U+9b63, U+9bc0, U+9bf5-9bf6, U+9c27, U+9c30, U+9c42, U+9cc2, U+9ccb, U+9d1c, U+9d39, U+9d5f, U+9e52, U+9f2a, U+9f94;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.45.woff2) format('woff2');
+ unicode-range: U+578c, U+600a, U+76d3, U+7715, U+7723, U+774e, U+7758, U+7769, U+77a3, U+77c0, U+77c2, U+77f5, U+77fa, U+782a, U+7842, U+784a, U+7885, U+7892, U+78e3, U+78ea, U+7912, U+7964, U+7994, U+799e, U+79a9, U+79e0, U+7a11, U+7a44, U+7a50, U+7a59, U+7a5b, U+7a6f, U+7a71, U+7a75, U+7aaf, U+7ac2, U+7ae2, U+7b09, U+7b0d, U+7b69, U+7bdb, U+7bf3, U+7c11, U+7c20, U+7c83, U+7c96, U+7cd3, U+7cfa, U+7d2d, U+7d3e, U+7d6d, U+7d76, U+7d85, U+7dc5, U+7dcd, U+7e42, U+7e4b, U+7e63, U+7f47, U+7f59, U+7f65, U+7f7c, U+7f97, U+7f9c, U+7fed, U+8011, U+802e, U+8078, U+80b8, U+80f9, U+8123, U+816c, U+8184, U+8186, U+818b, U+81aa, U+81d5, U+8203, U+8252, U+826b, U+826d, U+8276, U+827c, U+833f, U+8362, U+8373, U+8382, U+841a, U+84d7, U+84f1, U+854b, U+855f, U+8583, U+8590, U+85a0, U+85fa, U+8613, U+862a, U+8675, U+86be, U+86d6, U+86dc, U+874d, U+8768, U+87c2, U+87dc, U+880f, U+8855, U+8858, U+889f, U+88ac, U+895b, U+8abe, U+8b45, U+8b4c, U+8b78, U+8b9c, U+8c3b, U+8c60, U+8cda, U+8d9d, U+8da1, U+8dfe, U+8e00, U+8e38, U+8e4e, U+8e61, U+8e73, U+8e9b, U+8ea9, U+8eb6, U+8ecf, U+8eec, U+8f35, U+8f57, U+8f65, U+8fa2, U+9037, U+9048, U+908c, U+911f, U+918e, U+91bb, U+91ed, U+9238, U+928c, U+92c2, U+92ce, U+9350, U+93b4, U+93b8, U+940d, U+9458, U+946e, U+9594, U+95cd, U+96cb, U+9723, U+9743, U+97cd, U+9833, U+98a9, U+98e6, U+9914, U+99cb, U+9a04, U+9a48, U+9aa9, U+9abb, U+9abe, U+9af2, U+9b19, U+9b3d, U+9b6b, U+9b73, U+9bc8, U+9be9, U+9bec, U+9c0c, U+9c6e, U+9c93, U+9d02, U+9d44, U+9d6c, U+9d8d, U+9da0, U+9dc1, U+9dd6, U+9e07, U+9e18, U+9e27, U+9e59, U+9e8f, U+9eb0, U+9eee, U+9f04-9f05, U+9f16, U+9f6f, U+9f93;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.46.woff2) format('woff2');
+ unicode-range: U+7640, U+76ea, U+7700, U+7732, U+774b, U+77c3, U+77d2, U+782b, U+785f, U+7880, U+78a9, U+78c4, U+7902, U+7907, U+790a, U+7959, U+7970, U+7973, U+7979, U+7990, U+79aa, U+79f3, U+79fc, U+7a04, U+7a07-7a08, U+7a18-7a19, U+7a62, U+7af8, U+7afe, U+7b10, U+7b1c, U+7b42, U+7b63, U+7b8f, U+7b92, U+7bdf, U+7bfa, U+7ca7, U+7ce7, U+7d02, U+7d10, U+7d33, U+7d3b, U+7d80, U+7db9, U+7dd0, U+7df1, U+7e08, U+7e56, U+7e6f, U+7e74, U+7e80, U+7f3e, U+7f89, U+7fad, U+7fb7, U+7fc8, U+800a, U+8021, U+8140, U+8142, U+81d7, U+81da, U+824d, U+8269, U+82c5, U+8381, U+83de, U+83f3, U+8408, U+844f, U+8481, U+8491, U+84d4-84d5, U+8519, U+853f, U+8563, U+8567, U+8586, U+8597, U+859d, U+85c0, U+860c, U+864b, U+86bf, U+872b, U+873d, U+8744, U+87a5, U+8805, U+881a, U+8878, U+88bd, U+88f6, U+88fa, U+8923, U+8938, U+89d3, U+8a45, U+8a47, U+8a50, U+8a5b, U+8abb, U+8abd, U+8ac2, U+8ae7, U+8b1a, U+8b21, U+8c67, U+8cae, U+8cc2, U+8ce1, U+8cf1, U+8d51, U+8d79, U+8d7d, U+8db9, U+8e03, U+8e5e, U+8e67, U+8ebb, U+8ebf, U+8f27, U+8f3b, U+8f3d, U+90df, U+910d, U+9111, U+917c, U+9181, U+9195, U+91a5, U+91e6, U+91ea, U+9215, U+9221, U+9235, U+9292, U+9299, U+92fa, U+9317, U+9325, U+9353, U+935f, U+938d, U+9398, U+93cd, U+93fd, U+93ff, U+940e, U+9424, U+9432, U+943f, U+944a, U+9527, U+958f, U+95a7, U+95db, U+969d, U+96a5-96a6, U+9744, U+9771, U+97aa, U+97ba, U+97bf, U+97df, U+9840, U+98b1, U+98c0, U+98e5, U+98ea, U+9912, U+9946, U+995d, U+99bf, U+9a07, U+9a66, U+9ac9, U+9acf, U+9b09, U+9b38, U+9b5b, U+9cf7, U+9d4b, U+9d4f, U+9d68, U+9d7c, U+9df5, U+9dfc, U+9e0d, U+9e13, U+9e16, U+9e60, U+9ef6, U+9f09, U+9f70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.47.woff2) format('woff2');
+ unicode-range: U+7b9b, U+7b9e, U+7ba4, U+7bb7, U+7bb9, U+7bbf, U+7bdc, U+7c1e, U+7c24, U+7c28, U+7c39, U+7c3d, U+7c6c, U+7c94, U+7cb8, U+7d07, U+7d1d, U+7d3a, U+7d46, U+7d73, U+7d84, U+7d8a, U+7d8f, U+7d92, U+7d94, U+7d97, U+7db4, U+7ddd-7dde, U+7de6, U+7df0, U+7df6, U+7e23, U+7e39, U+7e5c-7e5d, U+7e69, U+7e8f, U+7f43, U+7f5d, U+7f70, U+7fb4, U+7fe2, U+8061, U+8079, U+807b, U+807e, U+8115, U+811f, U+8133, U+813d, U+813f, U+81c8, U+8251, U+8259, U+8262, U+82bb, U+833b, U+834a, U+83d0, U+83d3, U+83d9-83da, U+83e3, U+83e6, U+83e8, U+8454, U+8460, U+846e, U+8472, U+84d9, U+8501, U+855b-855c, U+8566, U+8575, U+8577, U+8596, U+85e8, U+85ee, U+85f0, U+85f3, U+85f5, U+8643, U+8658, U+865c-865d, U+86e5, U+86f6, U+8720, U+8778, U+8790, U+8796, U+87a1-87a2, U+87f3, U+880c-880d, U+8812, U+8817, U+881d, U+881f, U+8898, U+891c, U+8928, U+897e, U+898a, U+899a-899b, U+899f-89a0, U+89af, U+8a1c, U+8a21, U+8a2e, U+8a3c, U+8a77, U+8a7a, U+8ac9, U+8ad2, U+8ad8, U+8ae6, U+8afa, U+8b00, U+8b20, U+8b29, U+8b38, U+8b3d, U+8b8d, U+8b9b, U+8ca6, U+8cb8, U+8cbd, U+8cc5, U+8cca, U+8cf3, U+8cfa, U+8d00, U+8d04, U+8d0a, U+8d0c, U+8daa, U+8dc1, U+8dc8, U+8dd2, U+8e56, U+8ec0, U+8ec7, U+8ed4, U+8ed8, U+8ee3, U+8efb, U+8f12, U+8f25-8f26, U+8f5f, U+9007, U+9094, U+90a5, U+90ab, U+913d, U+9186, U+919e, U+91bd, U+91e5, U+9202, U+923d, U+924d, U+925b, U+9293, U+929c, U+92c7, U+92d2, U+92f0, U+92f7, U+9320, U+9326, U+93b2, U+93c8, U+93df, U+9411, U+942c, U+9472, U+9474, U+947f, U+957b, U+9591, U+95b0, U+95b3-95b4, U+95b9, U+95cc, U+95e1, U+966e, U+967b, U+9702, U+9775, U+978a, U+979b, U+97d3;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.48.woff2) format('woff2');
+ unicode-range: U+5c8d, U+72e8, U+771e, U+7749, U+7774, U+778f, U+77a1, U+780f, U+7824, U+78b5, U+78ef, U+7910-7911, U+7976, U+7996-7997, U+79b0, U+79b5, U+79c5, U+7a21, U+7a34, U+7a7d, U+7aa4, U+7ac8, U+7acc, U+7ae4, U+7b32, U+7b3f, U+7c59, U+7cb5, U+7cbf, U+7d18, U+7d52-7d53, U+7dcb, U+7e2a, U+7e8d, U+7ed7, U+7fa0, U+7fd6, U+7ff8, U+8076, U+80a7, U+81f6, U+820b, U+8263, U+82bc, U+836e, U+8422, U+844b, U+84e7, U+8504, U+8552, U+85ad, U+8672, U+86a1, U+8738, U+87a6, U+8829, U+89b5, U+8a39, U+8a3b, U+8a40, U+8a44, U+8aac, U+8ae0, U+8b57, U+8c4a, U+8cc1, U+8d8c, U+8db0, U+8e04, U+8ea6, U+8ee7, U+8f02, U+8f10, U+8f18, U+8f28, U+9076, U+908f, U+9206, U+9216, U+927c, U+9285, U+92ea, U+930b, U+9365, U+9387, U+939d, U+9429, U+9437, U+9470, U+95bd, U+95df, U+96a3, U+96b2, U+96d8, U+971d, U+979f, U+97bb, U+97ee, U+97f4, U+97f7, U+980a-980b, U+9813, U+981c, U+9855, U+9868, U+9874, U+98b5, U+98f7, U+98fa, U+98fe, U+9900, U+990c, U+9913, U+993c, U+994c, U+9952, U+9961, U+9973, U+997b, U+99b4, U+99dc, U+99e3, U+99e5, U+99e8, U+99f6, U+9a0d, U+9a23, U+9a30, U+9a3f, U+9a41-9a42, U+9a47, U+9a51, U+9a55-9a56, U+9a5b, U+9a65, U+9abf, U+9ade, U+9ae7, U+9b00, U+9b04-9b05, U+9b22, U+9b27, U+9b70, U+9b75, U+9b78, U+9b7a, U+9bca, U+9bd0, U+9bd3, U+9bd6-9bd8, U+9bfd, U+9c1e, U+9c2c, U+9c35, U+9c38, U+9c3b, U+9c4c, U+9c7a, U+9ce9-9cea, U+9cf6, U+9cff, U+9d22, U+9d2d, U+9d33-9d35, U+9d3a, U+9d3d, U+9d41, U+9d5d, U+9d88, U+9d90, U+9d93, U+9da9, U+9db4, U+9dd8, U+9de9, U+9df4, U+9dfd, U+9ea9, U+9eb5, U+9efa, U+9f11, U+9f18, U+9f25, U+9f2e, U+9f72, U+9f7c, U+9f8e, U+9f9d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 600;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/600/3bfe2e9707d553d558929661f98f67f6.49.woff2) format('woff2');
+ unicode-range: U+76c9, U+76e2, U+7718, U+7771, U+777b, U+779e, U+78e0, U+7924, U+793f, U+7969, U+79a8, U+79fa, U+7a5f, U+7aab, U+7b0e, U+7b8b, U+7be8, U+7c4b, U+7cee, U+7d63, U+7de4, U+7df5, U+7e00, U+7e1a-7e1b, U+7e27, U+7e7f, U+7f99, U+7fae, U+80b0, U+8278, U+8359, U+8395, U+8399, U+8447, U+845f, U+84aa, U+8602, U+873c, U+8751, U+87a0, U+87a7, U+87c5, U+87e2, U+87e7, U+894c, U+8958, U+897d, U+8a1e, U+8b04, U+8c3c, U+8c70, U+8c92, U+8cf7, U+8e92, U+8ead, U+8fcd, U+91ff, U+927d, U+92ab, U+92b2, U+9327, U+935a, U+9371, U+93f8, U+946a, U+95a2, U+9777, U+9826, U+98bb, U+991f, U+992b, U+993d, U+9a0a, U+9a46, U+9a94, U+9aa3, U+9b33, U+9b52, U+9b7d, U+9b7f, U+9b85, U+9b87, U+9b8e, U+9b98, U+9baa, U+9bad, U+9be8, U+9c3f-9c40, U+9c44, U+9c53, U+9c96, U+9d12, U+9d19, U+9d1e, U+9d63, U+9d6a, U+9de6, U+9dfa, U+9f5c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.0.woff2) format('woff2');
+ unicode-range: U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e16, U+4e1a, U+4e1c, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e48, U+4e4b, U+4e5f, U+4e86, U+4e8b-4e8c, U+4e8e, U+4e9b, U+4ea7, U+4eba, U+4ec0, U+4ece, U+4ed6, U+4ee3, U+4ee5, U+4eec, U+4efb, U+4f1a, U+4f46, U+4f4d, U+4f53, U+4f5c, U+4f60, U+4f7f, U+4fe1, U+513f, U+5148, U+5168, U+516c, U+5173, U+5176, U+5185, U+519b, U+51fa, U+5206, U+5229, U+5230, U+5236, U+524d, U+529b, U+52a0, U+52a8, U+5316, U+5341, U+539f, U+53bb, U+53c8, U+53ca, U+53d1, U+53ea, U+53ef, U+5408, U+540c, U+540e, U+5411, U+5458, U+548c, U+56de, U+56e0, U+56fd, U+5728, U+5730, U+58f0, U+5916, U+591a, U+5927, U+5929, U+5934, U+5979, U+597d, U+5982, U+5b50, U+5b66, U+5b83, U+5b9a, U+5b9e, U+5bb6, U+5bf9, U+5c06, U+5c0f, U+5c31, U+5de5, U+5df1-5df2, U+5e38, U+5e74, U+5e76, U+5e94, U+5ea6, U+5f00, U+5f53, U+5f88, U+5f97, U+5fc3, U+6027, U+60c5, U+60f3, U+610f, U+6210-6211, U+6216, U+6218, U+6240, U+624b, U+628a, U+63d0, U+653f, U+6559, U+6587, U+65af-65b0, U+65b9, U+65e0, U+65e5, U+65f6, U+660e, U+662f, U+6700, U+6708-6709, U+672c, U+673a, U+6765, U+679c, U+6837, U+6b21, U+6b63-6b64, U+6bd4, U+6c11, U+6ca1, U+6cd5, U+6d77, U+70b9, U+7136, U+7269, U+7279, U+73b0, U+7406, U+751f, U+7528, U+7531, U+7684, U+76f8, U+770b, U+7740, U+77e5, U+79cd, U+7acb, U+7b2c, U+7b49, U+7ecf, U+7ed9, U+7f8e, U+8001, U+8005, U+800c, U+80fd, U+81ea, U+884c, U+8868, U+88ab, U+897f, U+8981, U+89c1, U+8bdd, U+8bf4, U+8d77, U+8eab, U+8fc7, U+8fd8-8fd9, U+8fdb, U+901a, U+9053, U+90a3, U+90e8, U+90fd, U+91cc-91cd, U+957f, U+95e8, U+95ee, U+95f4, U+9762, U+9ad8;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.1.woff2) format('woff2');
+ unicode-range: U+4e07, U+4e14, U+4e49, U+4e66, U+4e89, U+4e94, U+4ea4, U+4eb2, U+4eca, U+4ee4, U+4ef6, U+4f20, U+4f4f, U+4f55, U+4fbf, U+4fdd, U+5019, U+505a, U+50cf, U+5143, U+5149, U+514b, U+5165, U+5171, U+5175, U+5177, U+518d, U+51b3, U+51c6, U+51e0, U+51fb, U+5207, U+5219, U+522b, U+529e, U+52a1, U+5317, U+533a, U+5355, U+5357, U+5373-5374, U+53cd, U+53d6-53d8, U+53e3, U+53eb, U+53f0, U+53f8, U+5404, U+540d, U+542c, U+544a, U+5462, U+547d, U+54c1, U+56db, U+573a, U+57fa, U+58eb, U+5904, U+5907, U+592a-592b, U+5931, U+5973, U+59cb, U+5b57-5b58, U+5b89, U+5b8c, U+5bfc, U+5c11, U+5c14, U+5c55, U+5c71, U+5e02-5e03, U+5e08, U+5e26, U+5e72-5e73, U+5efa, U+5f0f, U+5f20, U+5f3a, U+5f62, U+5f71, U+5f80, U+5fb7, U+5fc5, U+5feb, U+600e, U+601d, U+603b, U+611f, U+624d, U+6253, U+62a5, U+62c9, U+6301, U+6307, U+636e, U+63a5, U+6536, U+6539, U+653e, U+6570, U+66f4, U+670d, U+671b, U+671f, U+672a, U+672f, U+6743, U+6761, U+6781, U+6797, U+6839, U+683c, U+6b65, U+6b7b, U+6bcf, U+6c14, U+6c34, U+6c42, U+6cbb, U+6d3b, U+6d41, U+6d4e, U+6e05, U+7231, U+738b, U+7535, U+754c, U+767d, U+76ee, U+76f4, U+771f, U+773c, U+786e, U+793e, U+795e, U+79d1, U+7a0b, U+7a7a, U+7b11, U+7ba1, U+7c7b, U+7cfb, U+7ec4, U+7ed3, U+7edf, U+7f57, U+8054, U+81f3, U+8272, U+82f1, U+89c2, U+89c4, U+89c9, U+89e3, U+8a00, U+8ba1, U+8ba4, U+8ba9, U+8bae, U+8bb0, U+8bb8, U+8bba, U+8bbe, U+8bc1, U+8bc6, U+8be5, U+8c03, U+8c61, U+8d44, U+8d70, U+8def, U+8f66, U+8f6c, U+8fb9, U+8fbe, U+8fd0-8fd1, U+8fdc, U+8fde, U+9020, U+91cf, U+91d1, U+961f, U+9662, U+96be, U+975e, U+9886, U+9898, U+98ce, U+98de, U+9a6c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.2.woff2) format('woff2');
+ unicode-range: U+4e03, U+4e13, U+4e25, U+4e3e, U+4e4e, U+4e5d, U+4e9a, U+4eac, U+4ec5, U+4ef7, U+4f01, U+4f17, U+4f3c, U+4f4e, U+4f8b, U+4f9b, U+4f9d, U+503c, U+515a, U+516b, U+516d, U+5174, U+5199, U+519c, U+51b5, U+5212, U+5217, U+529f, U+52bf, U+5305, U+533b, U+5343, U+534a, U+534e, U+5386, U+53c2, U+53cb-53cc, U+53e4, U+53e6, U+53f2, U+53f7, U+5403, U+5417, U+5427, U+5468, U+54cd, U+5546, U+5668, U+56e2, U+56f4, U+56fe, U+571f, U+578b, U+57ce, U+5883, U+589e, U+590d, U+591f, U+5947, U+59d4, U+5b69, U+5b98, U+5ba2, U+5bb3, U+5bb9, U+5bc6, U+5bdf, U+5c3d, U+5c40, U+5df4, U+5e0c, U+5e7f, U+5e95, U+5e9c, U+5f15, U+5f8b, U+5fd7, U+5ff5, U+6001, U+606f, U+613f, U+623f, U+6279, U+627e, U+6280, U+6295, U+62a4, U+6309, U+63a8, U+652f, U+653b, U+6545, U+6548, U+654c, U+6574, U+6597, U+6599, U+65ad, U+65bd, U+65cf, U+65e9, U+6613, U+661f, U+663e, U+66fe, U+671d, U+6740, U+674e, U+6784, U+67d0, U+67e5, U+6807, U+6848, U+6b62, U+6b66, U+6bb5, U+6bcd, U+6c5f, U+6cb3, U+6ce8, U+6d3e, U+6d88, U+6df1, U+6ee1, U+706b, U+7167, U+7236, U+7247, U+7559, U+75c5, U+767e, U+77f3, U+7814, U+793a, U+79bb, U+79f0, U+7a76, U+7a81, U+7ad9, U+7ae0, U+7b54, U+7b97, U+7c73, U+7cbe, U+7d27, U+7ea2, U+7ea6-7ea7, U+7eaa, U+7ebf, U+7ec6-7ec8, U+7edd, U+7eed, U+7ef4, U+7fa4, U+8003, U+81f4, U+8282, U+82b1, U+82cf, U+8425, U+843d, U+867d, U+88c5, U+89c6, U+8bb2, U+8bc9, U+8bed, U+8bf7, U+8c08, U+8d23, U+8d28, U+8d39, U+8d8a, U+8db3, U+8ddf, U+8f7b, U+8f83, U+9009, U+91c7, U+9632, U+963f, U+9645, U+9648, U+9664, U+968f, U+96c6, U+9700, U+9752, U+9769, U+97f3, U+9879, U+987b, U+9996, U+9a8c, U+9ec4, U+9ed1;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.3.woff2) format('woff2');
+ unicode-range: U+4e45, U+4e50, U+4e60, U+4e70-4e71, U+4e91, U+4ecd, U+4efd, U+4f0a, U+4f18, U+4f24, U+4f59, U+4f5b, U+4fee, U+5012, U+5047, U+505c, U+5145, U+514d, U+5170, U+517b, U+51b2, U+51b7, U+5218, U+521a-521b, U+521d, U+5224, U+523b, U+526f, U+52a9, U+52b3, U+534f, U+5360-5361, U+536b, U+5370, U+538b, U+53e5, U+53f3, U+5426, U+54c8, U+54ea, U+554a, U+5584, U+559c, U+5750, U+5757, U+575a, U+591c, U+592e, U+5988, U+5a01, U+5b88, U+5b97, U+5ba1, U+5ba3-5ba4, U+5bcc, U+5c04, U+5c3c, U+5c42, U+5c45, U+5c5e, U+5c81, U+5c9b, U+5dde, U+5de6, U+5dee, U+5e1d, U+5e2e, U+5f02, U+5f39, U+5f81, U+5f85, U+5fae, U+6000, U+6015, U+6025, U+602a, U+6076, U+60a8, U+60ca, U+6258, U+6267, U+627f, U+6297, U+62c5, U+62ff, U+6325, U+6392, U+63a7, U+6562, U+65e2, U+665a, U+666e, U+6728, U+6751, U+6811, U+6821, U+68c0, U+6982, U+6a21, U+6b22, U+6bdb, U+6c49, U+6c89, U+6ce2, U+6d32, U+6e38, U+6e90, U+6f14, U+6fc0, U+7075, U+70ed, U+72af, U+72b6, U+72ec, U+7387, U+73af, U+7403, U+751a, U+7530, U+7537, U+7565, U+7591, U+75db, U+7687, U+76ae, U+76ca, U+7701, U+7834, U+798f, U+79ef, U+7a0e, U+7a7f, U+7adf, U+7b56, U+7b80, U+7d20, U+7eb3, U+7ee7, U+7f51, U+7f6a, U+7f6e, U+804c, U+80a1, U+80b2, U+80cc, U+80dc, U+8111, U+811a, U+8138, U+822a, U+822c, U+8239, U+827a, U+82e5-82e6, U+8303, U+8349, U+836f, U+83b7, U+8457, U+8840, U+8863, U+89d2, U+8b66, U+8bd5, U+8bfb, U+8c01, U+8d1f, U+8d22, U+8d85, U+8ff0, U+8ffd, U+9000-9002, U+901f, U+914d, U+9152, U+94b1, U+94c1, U+94f6, U+9519, U+9633, U+9635-9636, U+9646, U+964d, U+9650, U+9669, U+96f7, U+9759, U+987f, U+9884, U+98df, U+9999, U+9f99;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.4.woff2) format('woff2');
+ unicode-range: U+4e34, U+4e3d, U+4e61, U+4e88, U+4e92, U+4ea1, U+4ea6, U+4eae, U+4ecb, U+4ed8, U+4f26, U+4f2f, U+4fc4, U+501f, U+5065, U+51cf, U+5251, U+5267, U+52d2, U+5347, U+5356, U+535a, U+5371, U+5382, U+53bf, U+53f6, U+5409, U+541b, U+542b, U+5438, U+5440, U+5473, U+547c, U+54e5, U+5510, U+559d, U+56ed, U+56f0, U+56fa, U+5723, U+5747, U+574f, U+57df, U+5802, U+5965, U+5987, U+59d0-59d1, U+5a18, U+5a5a, U+5b59, U+5b8b, U+5b9d, U+5bab, U+5bfb, U+5c01, U+5c1a, U+5c4b, U+5cb8, U+5de8, U+5e2d, U+5e78, U+5e8f, U+5ea7, U+5ead, U+5eb7, U+5f1f, U+5f52, U+5f55, U+5fd9, U+5ffd, U+6050, U+6069, U+6162, U+6237, U+6293, U+62db, U+62e9, U+62ec, U+635f, U+6362, U+6388-6389, U+638c, U+63a2, U+6447, U+6551, U+6563, U+65c1, U+65c5, U+65e7, U+6625, U+666f, U+667a, U+6697, U+670b, U+6742, U+6750, U+675f, U+677e-677f, U+67aa, U+67b6, U+6838, U+68a6, U+695a, U+697c, U+6b27, U+6b3e, U+6bd2, U+6beb, U+6c38, U+6c99, U+6cb9, U+6cfd, U+6d0b, U+6d1b, U+6d4b, U+6e10, U+6e29, U+6e2f, U+6e56, U+6e7e, U+706d, U+70ae, U+70b8, U+70c8, U+70df, U+7248, U+7259, U+73ed, U+753b, U+7597, U+767b, U+76d1, U+775b, U+7761, U+7763, U+77ed, U+793c, U+7968, U+7981, U+79d8, U+79fb, U+7aef, U+7b14, U+7d22, U+7f16, U+7f3a, U+8033, U+80af, U+80e1, U+8131, U+8230, U+826f, U+8363, U+83ab, U+85cf, U+8651, U+8865, U+8ba8, U+8bc4, U+8bcd, U+8bd7, U+8bef, U+8bfa, U+8c0b, U+8c13, U+8c22, U+8d25, U+8d27, U+8d35, U+8d76, U+8dd1, U+8df3, U+8f7d, U+8f93, U+9003, U+9010, U+9047, U+9057, U+907f, U+91ca, U+91ce, U+949f, U+9500, U+95fb, U+9634, U+9644, U+96e8, U+9732, U+9760, U+9876, U+987a, U+987e, U+989d, U+996d, U+9c7c, U+9c81, U+9c9c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.5.woff2) format('woff2');
+ unicode-range: U+4e01, U+4e1d, U+4e30, U+4e43, U+4ebf, U+4f11, U+4f19, U+4f1f, U+4f38, U+4fb5, U+4fc3, U+5144, U+5178, U+51b0, U+51e1, U+5200, U+5211, U+523a, U+52aa, U+5348, U+5377, U+5434, U+54f2, U+552e-552f, U+5566, U+558a, U+5634, U+5706, U+5766, U+57c3, U+57f9, U+5854, U+585e, U+590f, U+593a, U+5957, U+59b9, U+59bb, U+59c6, U+59d3, U+5b81, U+5b87, U+5bbd, U+5c0a, U+5c24, U+5ddd, U+5e01, U+5e84, U+5e8a, U+5e93, U+5e97, U+5ef6, U+5f03-5f04, U+5f31, U+5f69, U+5f92, U+5fcd, U+5fd8, U+6012, U+60b2, U+620f, U+6269, U+626c, U+6298, U+62b1, U+62b5, U+62bd, U+62cd, U+62e5, U+632f, U+63aa, U+63e1, U+63f4, U+641e, U+6446, U+6469, U+64cd, U+66b4, U+66f2, U+66ff, U+672b, U+6731, U+6768, U+6770, U+6790, U+67d3, U+684c, U+6885, U+68ee, U+690d, U+6b32, U+6b4c, U+6b8a-6b8b, U+6bc1, U+6bd5, U+6c47, U+6c7d, U+6cbf, U+6d1e, U+6d6a, U+6df7, U+6f5c, U+706f, U+719f, U+7237-7238, U+725b, U+72c2, U+731b, U+732e, U+7389, U+73a9, U+74e6, U+7532-7533, U+76d6, U+76d8, U+76db, U+76df, U+7840, U+786c, U+7956, U+79c0-79c1, U+79cb, U+7a33, U+7a97, U+7ade, U+7b51, U+7bc7, U+7eaf, U+7eb7-7eb8, U+7ec3, U+7edc, U+7eff, U+7f13, U+7ffb, U+8036, U+8089, U+81e3, U+821e, U+83b1, U+8428, U+848b, U+8499, U+84dd, U+864e, U+865a, U+8857, U+8ba2, U+8bad, U+8bbf, U+8bd1, U+8bda, U+8bf8, U+8c37, U+8d1d, U+8d2d, U+8d38, U+8d5b, U+8d5e, U+8d75, U+8da3, U+8f6e-8f6f, U+8fc5, U+8fce, U+8fdd, U+8feb, U+8ff7, U+8ff9, U+900f, U+9014, U+904d, U+906d, U+90d1, U+9192, U+9488, U+9547, U+95ea, U+963b, U+9690, U+96c4-96c5, U+96ea, U+9707, U+9875, U+9986, U+9aa8, U+9b3c, U+9b54, U+9ea6, U+9ebb, U+9ed8, U+9f13, U+9f50;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.6.woff2) format('woff2');
+ unicode-range: U+4e08, U+4e39, U+4e4c, U+4e4f, U+4e58, U+4eab, U+4ec1, U+4ed9, U+4eea, U+4ef0, U+4eff, U+4f0f, U+4f30, U+4f34, U+4fa0, U+4fa7, U+4fd7, U+500d, U+503a, U+503e, U+504f, U+5076-5077, U+507f, U+5192, U+51ac, U+51c0, U+51f6, U+520a, U+52b2, U+52c7, U+5385, U+5389, U+539a, U+53ec, U+53f9, U+542f, U+5439, U+5446, U+54b1, U+54ed, U+5531, U+5708, U+5806, U+5899, U+58c1, U+5949, U+594b, U+5954, U+5956, U+5976, U+5999, U+5a46, U+5b54, U+5b63-5b64, U+5b9c, U+5bd2, U+5c16, U+5c3e, U+5de7, U+5e55, U+5e86, U+5e9f, U+5f17, U+5f79, U+5f7b-5f7c, U+5f84, U+5f90, U+5fa1, U+5fc6, U+5fe0, U+6062, U+6068, U+6070, U+60a3, U+60ef, U+6108, U+61c2, U+6234, U+62ac, U+62d2, U+62dc, U+6302, U+6311, U+6355, U+63cf, U+6478, U+64a4, U+64ad, U+656c, U+65cb, U+65e6, U+6620, U+6653, U+6668, U+6682, U+66fc, U+6717, U+675c, U+676f, U+6865, U+6a2a, U+6cdb, U+6cea, U+6cf0, U+6d17, U+6d25, U+6d2a, U+6d89, U+6da6, U+6de1, U+6f6e, U+7070, U+707e, U+708e, U+70e6-70e7, U+7206, U+724c, U+72b9, U+72d7, U+739b, U+73cd, U+73e0, U+745e, U+75be, U+75c7, U+76fe, U+77ff, U+7801, U+78b0, U+79df, U+79e6, U+7a0d, U+7a77, U+7ae5, U+7b26, U+7b7e, U+7cae, U+7cca, U+7d2f, U+7e41, U+7eb5, U+7ecd, U+7f18, U+7f29, U+7f5a, U+7f62, U+7f72, U+7f8a, U+7ffc, U+805a, U+80c6, U+80de, U+80f8, U+817f, U+820d, U+8247, U+827e, U+8336, U+8352, U+83dc, U+866b, U+86cb, U+878d, U+8861, U+888b, U+88ad, U+88c1-88c2, U+89e6, U+8baf, U+8bfe, U+8d2b, U+8d56, U+8d6b, U+8ddd, U+8f70, U+8f86, U+8f91, U+8fa9, U+8fdf, U+90a6, U+955c, U+95ed, U+95f9, U+9677, U+9686, U+9694, U+969c, U+96f6, U+97e9, U+9a7b, U+9a91, U+9b42, U+9e1f, U+9e21, U+9f3b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.7.woff2) format('woff2');
+ unicode-range: U+4e27, U+4e54, U+4e95, U+4ec7, U+4ed4, U+4f0d, U+4f2a, U+4f69, U+4f73, U+4fa6, U+4fe9, U+50a8, U+5141, U+517c, U+518c, U+51c9, U+51e4, U+51ed, U+51ef, U+5238, U+5242, U+5269, U+529d, U+52b1, U+52c3, U+52e4, U+53d4, U+5413, U+5448, U+5761, U+5782, U+5821, U+58a8, U+58ee, U+594f, U+5974, U+5a1c, U+5a92, U+5b5f, U+5b99, U+5baa, U+5bbe, U+5c38, U+5c3a, U+5c4a, U+5ca9, U+5cf0, U+5d07, U+5de1, U+5e15, U+5e45, U+5e7b-5e7c, U+5f6d, U+5fe7, U+601c, U+604b, U+6084, U+6089, U+60d1, U+60dc, U+60e0, U+60e8, U+6124, U+6148, U+6167, U+6212, U+622a, U+624e, U+6251, U+626b, U+6270, U+62a2, U+62d4, U+62d6, U+62df, U+633a, U+63a9, U+63d2, U+641c, U+6444, U+6492, U+649e, U+654f, U+65d7, U+660f, U+6628, U+66f9, U+6735, U+679d, U+67cf, U+67d4, U+67f3, U+6851, U+6881, U+6b23, U+6b96, U+6bbf, U+6c0f, U+6c57, U+6c61, U+6ce5, U+6d01, U+6d53, U+6d6e, U+6db2, U+6e21, U+6ed1, U+6eda, U+6f02, U+6f2b, U+7126, U+71c3, U+722c, U+7267, U+7272, U+72f1, U+731c, U+7518, U+756a, U+75af, U+7686, U+7709, U+77a7, U+77db, U+788d-788e, U+78e8, U+7a3f, U+7af9, U+7bad, U+7bb1, U+7c4d, U+7c89, U+7c97, U+7ed5, U+7ee9-7eea, U+7efc, U+8010, U+8083, U+80a9, U+80c1, U+8109, U+814a, U+8150, U+8170, U+8179, U+8212, U+8258, U+82b3, U+8361, U+8377, U+83f2, U+8482, U+8584, U+8bca, U+8be6, U+8c6a, U+8c8c, U+8d21, U+8d2f, U+8d34, U+8d4f, U+8d8b, U+8dc3, U+8dcc, U+8df5, U+8e2a, U+8f88, U+8f9b, U+8f9e, U+8fd4, U+8fea, U+9012, U+903b-903c, U+9075, U+90aa, U+90ce, U+9178, U+9501, U+952e, U+95f2, U+9605, U+970d, U+9887, U+9891, U+9897, U+989c, U+98d8, U+9910, U+996e, U+9a71, U+9a76, U+9a7e, U+9a82, U+9a97, U+9ece, U+9f84;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.8.woff2) format('woff2');
+ unicode-range: U+4e1b, U+4e22, U+4e8f, U+4ed7, U+4ef2, U+4faf, U+5179, U+517d, U+51a0, U+51af, U+51cc, U+51dd, U+524a, U+5272, U+5306, U+5362, U+538c, U+53d9, U+53db, U+5410, U+5415, U+541e, U+5428, U+543e, U+54ac, U+54c0, U+55b7, U+561b, U+57cb, U+5939, U+5948, U+5b8f, U+5bbf, U+5bc2, U+5bc4, U+5bff, U+5c18, U+5c1d, U+5c48, U+5c82, U+5c97, U+5ce1, U+5e10, U+5e3d, U+5e7d, U+5ef7, U+5f25, U+5f2f, U+5faa, U+6016, U+6028, U+6052, U+606d, U+607c, U+609f, U+60e7, U+614c, U+614e, U+6170, U+6208, U+6241, U+6263, U+6276, U+6291, U+6296, U+629a-629b, U+62bc, U+62f3, U+6324, U+6377, U+63ed, U+642c, U+64e6, U+6566, U+6572, U+659c, U+65e8, U+6606, U+660c, U+6643, U+664b, U+6676, U+6696, U+66f0, U+67f1, U+6863, U+68af-68b0, U+6905, U+6b3a, U+6c60, U+6c64, U+6c88, U+6c9f, U+6cc9, U+6d45, U+6d82, U+6d8c, U+6e14, U+6e7f, U+6f20, U+6fb3, U+70bc, U+70c2, U+7164, U+718a, U+71d5, U+7262, U+7275, U+72e0, U+72fc, U+730e, U+732a-732b, U+7384, U+73bb, U+7434, U+745f, U+74f6, U+75ab, U+75b2, U+75bc, U+764c, U+76d7, U+78c1, U+795d, U+7965, U+796d, U+79e9, U+7a00, U+7a46, U+7b79, U+7c92, U+7cb9, U+7cd6, U+7d2b, U+7ea0, U+7eb9, U+7ebd, U+8017, U+806a, U+809a, U+809d, U+80a4-80a5, U+80bf, U+810f, U+817e, U+81c2, U+8270, U+82cd, U+83cc, U+8463, U+86c7, U+8870, U+8881, U+8896, U+8a89, U+8be2, U+8bf1, U+8c46, U+8d37, U+8d3a, U+8d4b, U+8d54, U+8d64, U+8de8, U+8e0f, U+8eb2, U+8eba, U+8f89, U+8f96, U+8fc1, U+8fc8, U+900a, U+9063, U+9065, U+9093, U+90ae, U+90bb, U+9189, U+9274, U+94a2, U+94bb, U+94dc, U+94fa, U+950b, U+9601, U+9614, U+966a, U+9676, U+96fe, U+978b, U+97e6, U+9970, U+9b4f, U+9e23, U+9f20, U+9f7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.9.woff2) format('woff2');
+ unicode-range: U+4e11, U+4e18, U+4e32, U+4e59, U+4e73, U+4e7e, U+4ec6, U+4ed3, U+4f10, U+4f8d, U+4fca, U+4ff1, U+5085, U+50b2, U+50bb, U+51fd, U+5237, U+5265, U+52a3, U+52ab, U+5339, U+5353, U+535c, U+5367, U+543b, U+5475, U+54e6, U+54e9, U+54fc, U+5507, U+5524, U+5582, U+5598, U+5609, U+5740, U+575b, U+582a, U+586b, U+5893, U+58f3, U+5938, U+5951, U+5978, U+5996, U+59a5, U+59a8, U+59ff, U+5a03, U+5acc, U+5b85, U+5bf8, U+5bfa, U+5c3f, U+5c4f, U+5c65, U+5cb3, U+5e05, U+5e99, U+5e9e, U+5ec9, U+5fcc, U+6094, U+60a6, U+60ac, U+60df, U+60e9, U+6109, U+611a, U+6155, U+6247, U+6254, U+626d-626e, U+62e6, U+62e8, U+62fc, U+62fe, U+6316, U+6321, U+6323, U+6349, U+63a0, U+642d, U+643a, U+65a4-65a5, U+6602, U+6674, U+679a, U+67dc, U+67ef, U+67f4, U+6842-6843, U+68c9, U+6b20, U+6b47, U+6b7c, U+6bc5, U+6c27, U+6c6a, U+6c83, U+6ce1, U+6d51, U+6d69, U+6da8, U+6dfb, U+6e34, U+6e83, U+6e9c, U+6ecb, U+6ef4, U+7089, U+7235, U+727a, U+73b2, U+7483, U+74dc, U+758f, U+75d5, U+7626, U+76b1, U+76d0, U+76ef, U+7720, U+7741, U+7897, U+7978, U+7a74, U+7a9d, U+7aed, U+7b3c, U+7cdf, U+7eb2, U+7ed8, U+7ef3, U+7f1d, U+7f34, U+7f69, U+7fbd, U+7ff0, U+8000, U+8015, U+804a, U+808c, U+80a0, U+80c3, U+80ce, U+80d6, U+8106, U+8154, U+8180, U+819c, U+820c, U+8231, U+82ac, U+82d7, U+8328, U+832b, U+8389, U+83b2, U+8427, U+845b, U+84c4, U+859b, U+8702, U+8986, U+89c8, U+8bbc, U+8bde, U+8c28, U+8c6b, U+8d24, U+8d2a, U+8d62, U+8d74, U+8f68, U+8fa8, U+8fb1, U+9006, U+9080, U+90c1, U+90ed, U+9177, U+94c3, U+9510, U+9526, U+95f7, U+9675, U+96b6, U+96c7, U+96d5, U+9738, U+98a4, U+9971-9972, U+997f, U+9e3f, U+9e4f, U+9e70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.10.woff2) format('woff2');
+ unicode-range: U+4ea8, U+4ead, U+4ed1, U+4f50, U+4fd8, U+5018, U+5021, U+50ac, U+50e7, U+5112, U+5188, U+51bb, U+51d1, U+52c9, U+52fe, U+5320, U+5351, U+5375, U+537f, U+53a8, U+5401, U+540a, U+541f, U+5435, U+543c, U+5490, U+54bd, U+5509, U+5565, U+5589, U+55ef, U+5631, U+56ca, U+5733, U+5851, U+5915, U+5984, U+59ae, U+59fb, U+5a07, U+5a74, U+5ac1-5ac2, U+5b55, U+5b5d, U+5bb0, U+5bb4, U+5bd3, U+5c09, U+5c60, U+5d29, U+5deb, U+5eb8, U+5eca, U+5f8c, U+6014, U+60a0, U+6101, U+626f, U+62ab, U+62b9, U+62c6, U+62d8, U+6328, U+644a, U+6458, U+6467, U+6491, U+6591, U+65bc, U+65fa, U+662d, U+6734, U+6746, U+67af, U+680f, U+6846, U+68cb, U+68f5, U+6b49, U+6b67, U+6c1b, U+6cc4, U+6cca, U+6d59, U+6d66, U+6d9b, U+6dcb, U+6e0a, U+6eaa, U+6ee9, U+6f0f, U+6f58, U+704c, U+7239, U+72ed, U+7329, U+7334, U+7391, U+7487, U+751c, U+752b, U+7545, U+754f, U+755c, U+7586, U+7624, U+76c6, U+76c8, U+76d2, U+76f2, U+76fc, U+77aa, U+77ac, U+77e3, U+77e9, U+77ee, U+78a7, U+7985, U+79a7, U+79d2, U+7a83, U+7b52, U+7ea4, U+7ef5, U+7f20, U+7f9e, U+7fc1, U+7fc5, U+7fd4, U+7fe0, U+8038, U+803b, U+8096, U+80ba, U+80c0, U+80f6, U+8116, U+81ed, U+8273, U+829d, U+838e, U+840d, U+8461, U+846c, U+853d, U+85aa, U+85e4, U+8679, U+86ee, U+871c, U+8822, U+886b, U+8877, U+88d5, U+88e4, U+88f8, U+8a93, U+8bb6, U+8c05, U+8c0a, U+8c2d, U+8d26, U+8d3c, U+8d3e, U+8d4c, U+8d50, U+8d5a, U+8d60, U+8d81, U+8dea, U+8f85, U+8f9f, U+8fbd, U+901d, U+9022, U+9042, U+906e, U+916c, U+94a6, U+94ed, U+94fe, U+9505, U+9521, U+95ef, U+9610, U+9640, U+9655, U+971e, U+987d, U+9888, U+98a0, U+9965, U+9a70, U+9a73, U+9aa4, U+9c8d, U+9e2d, U+9e45, U+9e7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.11.woff2) format('woff2');
+ unicode-range: U+4ea9, U+4f1e, U+4fa8, U+4fef, U+5026, U+50da, U+50f5, U+5146, U+5154, U+51a4, U+51c4, U+522e, U+5239, U+526a, U+52cb, U+532a, U+5398, U+53a6, U+53c9, U+53e0, U+540f, U+5429, U+5492, U+5496, U+54b3, U+54ce, U+54d1, U+54e8, U+5561, U+5578, U+5583, U+55bb, U+5632, U+5662, U+56b7, U+5751, U+575f-5760, U+5784, U+5835, U+5937, U+59ca, U+59da, U+59dc, U+59e8, U+5a9a, U+5ab3, U+5be1, U+5be8, U+5c41, U+5cad, U+5d16, U+5de2, U+5de9, U+5df7, U+5dfe, U+5f0a, U+5f13, U+5f26, U+5fbd, U+6055, U+6073, U+60f6, U+60f9, U+6123, U+6127, U+6168, U+61be, U+61d2, U+621a, U+6284, U+62d0, U+62d3, U+62e2, U+632a, U+633d, U+6350, U+6367, U+638f, U+6398, U+6401, U+640f, U+6454, U+6495, U+64b0, U+64c5, U+65ec, U+6614, U+6627, U+6655, U+6670, U+676d, U+67c4, U+68cd, U+68d2, U+6b6a, U+6bb7, U+6cfc, U+6d12, U+6d74, U+6d78, U+6d85, U+6db5, U+6deb, U+6dee, U+6e20, U+6e58, U+6eb6, U+6ede, U+6ee5, U+6f06, U+70ad, U+7130, U+714c, U+715e, U+722a, U+723d, U+72c4, U+72d0, U+72ee, U+733f, U+73ab, U+7433, U+743c, U+74f7, U+75f4, U+7728, U+778e, U+780d, U+7816, U+7855, U+7891, U+7984, U+7a23, U+7a84, U+7a91, U+7b28, U+7b4b, U+7bee, U+7c98, U+7ee2, U+7f55, U+800d, U+8058, U+80a2, U+80be, U+8102, U+810a, U+813e, U+817a, U+819d, U+8205-8206, U+821f, U+8236, U+8292, U+8302, U+8305, U+8350, U+83e9, U+8404, U+84b2, U+84b8, U+84ec, U+8521, U+8776, U+87ba, U+8854, U+888d, U+88f9, U+8bbd, U+8c0d-8c0e, U+8c26, U+8c2c, U+8c31, U+8d1e, U+8eaf, U+8f69, U+8fb0, U+902e, U+9038, U+90ca, U+90e1, U+9489, U+9493, U+94a9, U+964c, U+9661, U+96c0, U+96cc, U+97ad, U+9881, U+9976, U+997c, U+9a84, U+9a9a, U+9e26, U+9f0e, U+9f9f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.12.woff2) format('woff2');
+ unicode-range: U+4e38, U+4e56, U+4e5e, U+4f3d, U+4f63, U+5029, U+508d, U+5151, U+515c, U+5180, U+51f0, U+5256, U+5288, U+52d8, U+52ff, U+5308, U+5319, U+5352, U+5378, U+5384, U+53a2, U+545c, U+5495, U+54a8, U+54b8, U+54c4, U+54c7, U+54d7, U+54df, U+5580, U+55d3, U+563b, U+563f, U+56da, U+574a, U+574e, U+5792, U+57ab, U+5824, U+584c, U+5858, U+58e4, U+58f6, U+5983, U+5992, U+5a1f, U+5a31, U+5a36, U+5ae9, U+5b9b, U+5ba0, U+5bc7, U+5c51, U+5c61, U+5cfb, U+5d14, U+5e06, U+5e18, U+5e62, U+5f66, U+5f6a, U+6021, U+602f, U+604d, U+62f1, U+632b, U+634f, U+635e, U+6380, U+6500, U+655e, U+658b-658c, U+65a9, U+65f1, U+673d, U+6756, U+6816-6817, U+682a, U+683d, U+6853, U+6869, U+6876, U+68da, U+68e0, U+690e, U+699c, U+6bd9, U+6c41, U+6c5d, U+6cab, U+6cbc, U+6cbe, U+6ce3, U+6dd8, U+6df9, U+6e17, U+6ea2, U+6ee8, U+707f, U+7092, U+70db, U+7109, U+711a, U+716e, U+7199, U+73ca, U+7470, U+7538, U+7779, U+7784, U+7792, U+7838, U+788c, U+7948, U+7977, U+79bd, U+79c3, U+7a3b, U+7a3d, U+7a9c, U+7ad6, U+7b1b, U+7bf7, U+7cd5, U+7eb1, U+7eba, U+7ec5, U+7ed1, U+7ee3, U+7f1a, U+7f50, U+8086, U+80f3, U+8155, U+818a, U+81a8, U+82a6, U+82af, U+82f9, U+8346, U+83ca, U+8511, U+864f, U+8681, U+8721, U+884d, U+886c, U+88d9, U+8a79, U+8b6c, U+8bc8, U+8be1, U+8bf5, U+8c10, U+8c15, U+8c1c, U+8c23, U+8c34, U+8c79, U+8d29, U+8d2c, U+8d31, U+8d3f, U+8d9f, U+8e22, U+8e29, U+8e72, U+8e81, U+8f74, U+8f7f, U+8f90, U+8f9c, U+8fa3, U+8fc4, U+8fe6, U+9017, U+90b1, U+9119, U+9187, U+94a5, U+94a7, U+94f8, U+953b, U+9551, U+960e, U+9699, U+96c1, U+9706, U+9709, U+9756, U+97f5, U+9882, U+9896, U+99a8, U+9a74, U+9a87, U+9b41, U+9b44;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.13.woff2) format('woff2');
+ unicode-range: U+4e10, U+4e19, U+4e2b, U+4f3a, U+4f51, U+4f84, U+4fa3, U+4fae, U+4ffa, U+500f, U+501a, U+516e, U+51a5, U+51b6, U+51f3, U+51ff, U+5203, U+5220, U+527f, U+52df, U+5300, U+53a5, U+53ed-53ee, U+54a7, U+54af, U+54c9, U+5587, U+55a7, U+55c5, U+55e1, U+55e3, U+5636, U+566a, U+56bc, U+573e, U+575d, U+576a, U+5783, U+57ae, U+5815, U+594e, U+5960, U+5962, U+5986, U+5993, U+59ec, U+5a25, U+5a49, U+5ac9, U+5bde, U+5c2c, U+5c34, U+5c7f, U+5c9a, U+5d0e, U+5e87, U+5f18, U+5f6c, U+60d5, U+6115, U+618e, U+61c8, U+62c2, U+62d9, U+62ef, U+6320, U+6346, U+6361, U+6363, U+63b7, U+6402, U+6405, U+6577, U+65a7, U+65f7, U+663c, U+6652, U+6664, U+6687, U+6691, U+66ae, U+6749, U+674f, U+6795, U+67a2, U+680b, U+6850, U+68a2, U+68ad, U+68b3, U+68d5, U+68fa, U+69b4, U+6a31, U+6bef, U+6c22, U+6c79, U+6ca6, U+6caa, U+6cb8, U+6ccc, U+6cf3, U+6cfb, U+6d46, U+6da1, U+6daf, U+6dd1, U+6eaf, U+6ed4, U+6f6d, U+6f84, U+6f9c, U+6fa1, U+7076, U+70c1, U+70e4, U+7115, U+71ac, U+71e5, U+72ac, U+72e1, U+72f8, U+7529, U+7574, U+75d2, U+7785, U+77a5, U+7802, U+786b, U+78b3, U+7a1a, U+7a3c, U+7aa5, U+7eac, U+7ed2, U+7ede, U+7ee5, U+7ef8, U+7f05, U+7f14, U+7fa1, U+803d, U+803f, U+8042, U+8165, U+818f, U+8299, U+82bd, U+830e, U+8335, U+836b, U+83b9, U+83bd, U+840e, U+841d, U+84c9, U+852c, U+8574, U+85c9, U+85e9, U+85fb, U+8650, U+8680, U+8695, U+86db, U+8700, U+8747, U+8859, U+8910, U+8bcf, U+8be7, U+8beb, U+8e44, U+8e48, U+8eac, U+901b, U+903e, U+904f, U+917f, U+949e, U+94ae, U+94c5, U+9556, U+9600, U+964b, U+965b, U+971c, U+9877, U+988a, U+9a7c, U+9ab8, U+9b45, U+9cb8, U+9cde, U+9e3d, U+9e64, U+9e9f, U+9ebd, U+9edb;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.14.woff2) format('woff2');
+ unicode-range: U+4e4d, U+4f36, U+4fcf, U+4fed, U+50fb, U+5140, U+51a2, U+51f8-51f9, U+533f, U+5395, U+53e8-53e9, U+5431, U+5450, U+5455, U+547b, U+548b, U+549a, U+54ee, U+54fa, U+5564, U+556a, U+557c, U+5594, U+55dc, U+55fd, U+560e, U+5618, U+561f, U+56a3, U+5764, U+57a3, U+5885, U+589f, U+59e5, U+5a05, U+5a76, U+5b7d, U+5ba6, U+5bdd, U+5c39, U+5c6f, U+5ced, U+5d4c, U+5e16, U+5e1c, U+5e90, U+5ed3, U+5ed6, U+5f70, U+5fd6, U+60af, U+60bc, U+60ed, U+6151, U+6177, U+61ff, U+6233, U+625b, U+627c, U+62da, U+62e3, U+631f, U+63c9, U+63fd, U+6487, U+64bc, U+64d2, U+655b, U+6590, U+65ed, U+664c, U+6726, U+6789, U+67a3, U+6805, U+6813, U+6868, U+6897, U+68d8, U+68f1, U+69fd, U+6a61, U+6b79, U+6bcb, U+6bd3, U+6c70, U+6cae, U+6d47, U+6d4a, U+6d4f, U+6da9, U+6dcc, U+6e3a, U+6e85, U+707c, U+7095, U+70af, U+70eb, U+714e, U+7184, U+718f, U+725f, U+73c0, U+7409, U+7410, U+7422, U+745b-745c, U+7476, U+74e3, U+7554, U+762b, U+766b, U+76cf, U+7729, U+772f, U+7737, U+77bb, U+77e2, U+77eb, U+7830, U+789f, U+78b1, U+78c5, U+78d5, U+78f7, U+7901, U+7980, U+79b9, U+79c9, U+7a98, U+7a9f, U+7aa6, U+7aff, U+7c07, U+7c3f, U+7c9f, U+7caa, U+7ef0, U+7ef7, U+7f06, U+7f15, U+7f38, U+7fd8, U+804b, U+80da, U+80e7, U+817b, U+819b, U+82d1, U+82df, U+83ba, U+83f1, U+840c, U+8471, U+8513, U+8654, U+865e, U+867e, U+8682, U+868a, U+86d9, U+8774, U+88d4, U+88d8, U+88f3, U+8944, U+895f, U+89c5, U+8ba5, U+8bb3, U+8bc0, U+8c41, U+8d2e, U+8d4e, U+8db4, U+8dcb, U+8e66, U+8f7c, U+8fc2, U+90b5, U+9102, U+914c, U+91c9, U+9499, U+9524, U+9576, U+968b, U+96ef, U+9885, U+9890, U+9893, U+9988, U+9a6f, U+9a86, U+9ad3, U+9ccd, U+9eef;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.15.woff2) format('woff2');
+ unicode-range: U+4ea5, U+4ed5, U+4f5f, U+4f88, U+5162, U+5189, U+51db, U+5254, U+5323, U+5366, U+53ae, U+53f1, U+53fd, U+542d, U+5443, U+5499, U+54a6, U+552c, U+553e, U+55e6, U+565c, U+575e, U+57a6, U+57d4, U+58d5, U+592d, U+5955, U+599e, U+5a62, U+5a6a, U+5a7f, U+5ae6, U+5b5c, U+5bb5, U+5be5, U+5c49, U+5c94, U+5cd9, U+5ce8, U+5d1b, U+5d2d, U+5e9a, U+5eb5-5eb6, U+5f27, U+5f8a, U+5f98, U+5fcf, U+5fd2, U+5fff, U+6020, U+608d, U+6096, U+60eb, U+618b, U+61e6, U+6252, U+6273, U+6292, U+62c7, U+62e7, U+62f4, U+631a, U+6342, U+63e3, U+63ea, U+6413, U+6479, U+64ce, U+659f, U+6666, U+6714-6715, U+6760, U+67ec, U+6808, U+68a8, U+6912, U+69bb, U+69d0, U+6a71, U+6a90, U+6b86, U+6c13, U+6c28, U+6c2f, U+6c40, U+6c81, U+6c9b, U+6ca7, U+6d3d, U+6d95, U+6dc0, U+6df3, U+6e23, U+6e5b, U+6fd2, U+7011, U+717d, U+7194, U+7261, U+7281, U+72c8, U+72e9, U+733e, U+742a, U+745a, U+7578, U+75a4, U+75ae, U+75ea, U+75f0, U+7682, U+7693, U+76d4, U+7736, U+7766, U+77d7, U+785d, U+7940, U+79ba, U+79fd, U+7a8d, U+7b77, U+7bf1, U+7ca4-7ca5, U+7cd9, U+7d0a, U+7d6e, U+7eca, U+7ece, U+7efd, U+7f00, U+7f09, U+7f0e, U+8098, U+80aa, U+80ae, U+812f, U+816e, U+81c0, U+821c, U+8235, U+8237, U+82ad, U+82b8, U+82d4, U+82db, U+8304, U+831c, U+84e6, U+851a, U+8549, U+8587, U+8718, U+8749, U+87f9, U+8845, U+889c, U+88f4, U+8902, U+8bc5, U+8bec, U+8c0f, U+8c1f, U+8d41, U+8d66, U+8dbe, U+8e31, U+8fed, U+901e, U+9091, U+90b8-90b9, U+90dd, U+9171, U+9176, U+918b, U+949d, U+94c0, U+94ee, U+94f2, U+9523, U+9525, U+952f, U+9698, U+9704, U+9716, U+9761, U+9774, U+978d, U+9798, U+97a0, U+97e7, U+9975, U+9977, U+9ae6, U+9e43, U+9f9a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.16.woff2) format('woff2');
+ unicode-range: U+4e1e, U+4ea2, U+4f0e, U+4f22, U+4f43, U+4f6c, U+4f6f, U+4f83, U+4fa5, U+4fac, U+4fde, U+502a, U+502d, U+5243, U+52fa, U+5315, U+5321, U+5349, U+5484, U+5486, U+548e, U+54aa, U+54c6, U+5514, U+5520, U+5543, U+55b3, U+55bd, U+55e4, U+55e8, U+5600, U+566c, U+568e, U+57a2, U+595a, U+59be, U+5a34, U+5b09, U+5b75, U+5c27, U+5c4e, U+5dcd, U+5df3, U+5e4c, U+5eff, U+5f1b, U+5fe1, U+5ff1, U+6043, U+6064, U+60da, U+60f0, U+60fa, U+61ca, U+620e, U+622e, U+62a8, U+62ce, U+62ed, U+62f7, U+62fd, U+631b, U+6345, U+634d, U+63ba, U+6400, U+655d, U+66d9, U+66f3, U+672d, U+67ab, U+67ff, U+6854, U+68a7, U+68b5, U+692d, U+695e, U+6986, U+69db, U+6a0a, U+6a35, U+6b89, U+6bb4, U+6c72, U+6c8c, U+6d3c, U+6da4, U+6dc6, U+6e0e, U+6eba, U+6ee4, U+6f47, U+6f88, U+708a, U+70ab, U+70b3, U+70bd, U+70d8, U+7118, U+72d2, U+7316, U+731d, U+741b, U+7426, U+748b, U+752d, U+759a, U+75a1, U+75b9, U+75f9, U+761f, U+763e, U+7696, U+7738, U+773a, U+776c, U+77a9, U+77bf, U+77f6, U+780c, U+7845, U+78cb, U+7960, U+7a20, U+7a57, U+7a92, U+7a96, U+7b03, U+7b20, U+7b5b, U+7c27, U+7eeb, U+7f2a, U+7f81, U+7fe9, U+8087, U+808b, U+809b, U+80f0, U+8113, U+81b3, U+81fb, U+8214, U+829c, U+82c7, U+8338, U+8367, U+83c1, U+83c7, U+846b, U+854a, U+857e, U+85af, U+86fe, U+8757, U+8760, U+88b1, U+892a, U+8bdb, U+8c12, U+8c1b, U+8c24, U+8c5a, U+8d42-8d43, U+8d63, U+8dc4, U+8e09, U+8e0c, U+8e6c, U+8e87, U+8f67, U+8f99, U+8fab, U+8ff8, U+9041, U+90a2, U+915d, U+948a, U+94b3, U+94dd, U+9508, U+9555, U+95f8, U+95fa, U+95fd, U+962e, U+9631, U+9647, U+9668, U+9685, U+96a7, U+96cd, U+970e, U+9776, U+988c, U+9a8f, U+9aa1, U+9ca4, U+9e25;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.17.woff2) format('woff2');
+ unicode-range: U+4e52-4e53, U+4eb5, U+4fd0, U+4fe8, U+4ffe, U+5014, U+5195, U+524c, U+52be, U+533e, U+5406, U+541d, U+5420, U+545b, U+5471, U+5480, U+548f, U+54dd, U+5544, U+55d2, U+55d4, U+5608, U+5657, U+5669, U+5693, U+56f1, U+5703, U+572d, U+574d, U+57e0, U+5811, U+5830, U+58a9, U+5944, U+598a, U+5a20, U+5a3c, U+5ad6, U+5ae3, U+5b5a, U+5b70, U+5bc5, U+5c91, U+5d69, U+5e27, U+5e37, U+5e54, U+5e61, U+5f29, U+5f57, U+5f5d, U+5f77, U+5f99, U+6005, U+606a, U+607a, U+609a, U+60b4, U+60b8, U+60cb, U+60d8, U+612b, U+6194, U+6289, U+62cc, U+6376, U+637b, U+6390, U+63a3, U+63b3, U+63cd, U+63d6, U+6414, U+64a9, U+64ae, U+6512, U+6518, U+6538, U+6555-6556, U+6656, U+66a8, U+66dd, U+6845, U+6977, U+6a44, U+6a59, U+6a80, U+6b83, U+6bd7, U+6be1, U+6c2e, U+6c90, U+6ca5, U+6cbd, U+6de4, U+6e89, U+6ec7, U+6f13, U+6f31, U+6f8e, U+70ac, U+70d9, U+70f9, U+7280, U+72de, U+7405, U+7459, U+74a7, U+7599, U+75c9, U+7629, U+76ce, U+776b, U+777e-777f, U+783e, U+78ca, U+78fa, U+7941, U+795f, U+797a, U+79be, U+79e7, U+7a79, U+7afa, U+7b0b, U+7b50, U+7b5d, U+7be1, U+7c38, U+7c7d, U+7cb1, U+7e82, U+7eb6, U+7eee, U+7f8c, U+7fce, U+807f, U+80b4, U+80fa, U+814b, U+8151, U+8153, U+8339, U+8403, U+8424, U+8475, U+849c, U+853c, U+8611, U+86df, U+8782, U+8815, U+8884-8885, U+8892, U+8912, U+8925, U+89d1, U+8bd8, U+8be3, U+8bf2, U+8bfd, U+8d3b, U+8d58, U+8f84, U+8f97, U+900d, U+914b, U+9163, U+9165, U+9175, U+94a0, U+94b5, U+94e2, U+9504, U+950c, U+951a, U+9619, U+961c, U+962a, U+96cf, U+96f3, U+9739, U+9785, U+97f6, U+987c, U+9889, U+9a6d-9a6e, U+9abc, U+9ccc, U+9e20, U+9e4a, U+9e66, U+9e93, U+9edd, U+9f8b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.18.woff2) format('woff2');
+ unicode-range: U+4e15, U+4e9f, U+4f8f, U+4fdf, U+504e, U+5055, U+50a9, U+5197, U+51cb, U+5201, U+5228, U+532e, U+5364, U+53fc, U+542e, U+5494, U+54d2, U+54e7, U+54fd, U+5506, U+5527, U+5567, U+558b, U+55d6, U+5676, U+576f, U+5942, U+5a77, U+5ae1, U+5ce6, U+5d3d, U+5d4b, U+5dc5, U+5e1a-5e1b, U+5f3c, U+6002, U+6026, U+6059, U+606c, U+60bb, U+60e6, U+60ee, U+60f4, U+61a7-61a8, U+61ac, U+620a, U+620d, U+621f, U+62bf, U+62c8, U+62d7, U+631d, U+634e, U+63e9, U+6410, U+6452, U+64ac, U+64b5, U+64c2, U+652b, U+66e6, U+67b7, U+6829, U+6862, U+6893, U+6960, U+6984, U+69a8, U+6a58, U+6c16, U+6c1f, U+6c5b, U+6c5e, U+6c76, U+6c7e, U+6c82, U+6cf5, U+6d52, U+6d5a, U+6d8e, U+6dc4, U+6e0d, U+6e1d, U+6e24, U+6e2d, U+6e32, U+6e44, U+6f09, U+6f29-6f2a, U+6f3e, U+6f66, U+701a, U+7099, U+70ec, U+72d9, U+73ba, U+73c2, U+73d1, U+7435-7436, U+747e, U+74e2, U+75a3, U+75ca, U+75d4, U+7622, U+7656, U+7688, U+76bf, U+779f, U+77b3, U+77dc, U+7889, U+7898, U+78be, U+78d0, U+79e4, U+7ae3, U+7b06, U+7b08, U+7b3a, U+7b4f, U+7b8d, U+7bab, U+7cdc, U+7eda, U+7f24, U+7f2d, U+7f94, U+7fcc, U+8006, U+8046, U+80e5, U+81ba, U+81c6, U+82b9, U+82de, U+82ef, U+8327, U+832c, U+8340, U+8343, U+8543, U+85d0, U+85e5, U+86e4, U+8712, U+8715, U+8717, U+8737, U+8785, U+87c0, U+87cb, U+87d2, U+8879, U+8936, U+8baa, U+8bb9, U+8bc3, U+8be0, U+8c11, U+8c1a, U+8c62, U+8de4, U+8df7, U+8dfa, U+8e1e, U+8e35, U+8e4b, U+8e51, U+8e6d, U+8e7f, U+8fe5, U+9035, U+916a, U+91ab, U+91dc, U+9497, U+94ce, U+94d0, U+95f5, U+9611, U+9713, U+97ec, U+996c, U+997a, U+9985, U+9992, U+9a79, U+9a7f, U+9ab7, U+9ac5, U+9b13, U+9ca8, U+9cc4, U+9e49, U+9ecf;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.19.woff2) format('woff2');
+ unicode-range: U+4e98, U+4f5a, U+4f7c, U+4ff8, U+504c, U+5080, U+50a3, U+50ed, U+5121, U+523d, U+536f, U+53df, U+5457, U+5478, U+5537, U+556c, U+5599, U+55df, U+55f3, U+564e, U+568f, U+5742, U+5777, U+587e, U+58d1, U+59d7, U+5a13, U+5a75, U+5ab2, U+5ad4, U+5bd0, U+5bf0, U+5c79, U+5c90, U+605a, U+6063, U+607b, U+607f, U+60ec, U+61f5, U+620c, U+6248, U+62a1, U+637a, U+6396, U+6482, U+64b8, U+64de, U+6525, U+6593, U+660a, U+664f, U+667e, U+6684, U+66a7, U+675e, U+67ad, U+6866, U+6930, U+6954, U+6988, U+6aac, U+6b24, U+6ba1, U+6c26, U+6c55, U+6c93, U+6cde, U+6d9f, U+6da3, U+6da7, U+6db8, U+6dd6, U+6e43, U+6e4d, U+6ea5, U+6ed5, U+6f33, U+701b, U+7096, U+70fd, U+7119, U+715c, U+71b9, U+728a, U+7313, U+7357, U+73e5, U+740f, U+7455, U+7490, U+749e, U+74ee, U+7504, U+7525, U+75b5, U+762a, U+7638, U+768b, U+7691, U+76c5, U+7708, U+7750-7751, U+777d, U+77b0, U+796f, U+79f8, U+7a37, U+7abf, U+7b19, U+7b75, U+7b93, U+7c0c, U+7edb, U+7eef, U+7f04, U+7f2e, U+7f30, U+7f61, U+7f9a, U+7fb2, U+7fb9, U+7fdf, U+80e4, U+80f1, U+8110, U+8354, U+837c, U+8426, U+8446, U+84d3, U+8517, U+8537, U+85d5, U+8638, U+868c, U+86c0, U+86ca, U+86f9, U+8708, U+873f, U+874e, U+8759, U+8783, U+87c6, U+87fe, U+891a, U+8bb7, U+8bd9, U+8be9, U+8bf0, U+8c00, U+8c19, U+8c29, U+8d30, U+8d53, U+8d61, U+8dda-8ddb, U+8e0a, U+8e1d, U+8e42, U+8e4a, U+8e59, U+8e8f, U+8f72, U+8f95, U+8f98, U+8fe2, U+9050, U+907d, U+9083, U+90af, U+9149, U+916e, U+92c6, U+946b, U+94a1, U+94be, U+9522, U+9535, U+9540, U+956f-9570, U+9609, U+9773, U+988d, U+989a, U+998b, U+9aa5, U+9cc3, U+9cd6, U+9e2f, U+9e33, U+9e3e, U+9e73, U+9ed4, U+9f3e, U+9f88;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.20.woff2) format('woff2');
+ unicode-range: U+4f2b, U+5043, U+531d, U+5345, U+53a9, U+5477, U+5482, U+54ab, U+555c, U+557e, U+558f, U+55eb-55ec, U+55f7, U+5664, U+5685, U+56d4, U+572a, U+579b, U+58ec, U+59a9, U+5a04, U+5a29, U+5a9b, U+5b7a, U+5c96, U+5cac, U+5cb1, U+5d47, U+5e96, U+5f64, U+5f87, U+5fa8, U+5fb5, U+5fd0-5fd1, U+6006, U+606b, U+60c6, U+6249, U+62a0, U+630e, U+634b, U+6382, U+642a, U+6485, U+65a1, U+6635, U+66dc, U+6840, U+6867, U+6886, U+690b, U+693f, U+6963, U+6995, U+69cc, U+69df, U+6a1f, U+6a47, U+6a79, U+6c50, U+6d04, U+6d35, U+6d93, U+6d9d, U+6dc7, U+6dd9, U+6dde, U+6e25, U+6e6e, U+6f7a, U+6f7c, U+6fd1, U+7078, U+710a, U+714a, U+7166, U+71ce, U+7252, U+72f0, U+73b7, U+749c, U+74d2, U+752c, U+753a, U+759f, U+75b1, U+75bd, U+75d8, U+75de, U+75e2-75e3, U+75eb, U+7600, U+7620, U+7663, U+76c2, U+778c, U+77a0, U+781a, U+7825, U+795b, U+79c6, U+7a51, U+7aa0, U+7b71, U+7bd3, U+7c41, U+7ce0, U+7d93, U+7eab, U+7ef6, U+7f28, U+7f54, U+7f79, U+7fe1, U+7ff1, U+8018-8019, U+8037, U+8146, U+817c, U+81fc, U+82a5, U+82ae, U+82d3, U+8309, U+8317, U+835a, U+835f, U+836a, U+8393, U+843c, U+84ff, U+8559, U+85b0, U+85d3, U+8671, U+8693, U+86a3-86a4, U+86aa, U+86af, U+86d0, U+86d4, U+86f0, U+8713, U+873b, U+874c, U+88a4, U+88c6, U+8c04, U+8c06, U+8c0c, U+8c25, U+8c27, U+8d48, U+8dfb, U+8e52, U+8f76, U+8f8d-8f8e, U+9019, U+9099, U+90f8, U+9157, U+9170, U+91ae, U+91ba, U+94ec, U+94ff, U+952d, U+9539, U+9541, U+95e9, U+95f0, U+95fe, U+9602, U+96bc, U+96f9, U+977c, U+9791, U+9894, U+98d3, U+98d9, U+9981, U+998d, U+9a8b, U+9aef, U+9afb, U+9c87, U+9cab, U+9cce, U+9cd7, U+9e5e, U+9e9d, U+9edc, U+9ee0, U+9f9b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.21.woff2) format('woff2');
+ unicode-range: U+4ec4, U+4fd1, U+4fda, U+500c, U+5048, U+51bd, U+527d, U+530d, U+5310, U+53c1, U+53f5, U+549b, U+549d, U+54bb, U+5511, U+556e, U+5575, U+557b, U+55e5, U+5624, U+567c, U+5729, U+57a0, U+57c2, U+5914, U+5919, U+5a11, U+5a32, U+5a4a, U+5b40, U+5b5b, U+5b62, U+5b6a, U+5b93, U+5b95, U+5bb8, U+5c8c, U+5cea, U+5f0b, U+5ffb, U+600f, U+61a9, U+61cb, U+623e, U+62c4, U+6371, U+63ac, U+63b0, U+6448, U+645e, U+647a, U+65cc, U+6619, U+6641, U+6773, U+67d1, U+67e0, U+683e, U+68e3, U+6924, U+6994, U+6998, U+69ad, U+69b7, U+6c10, U+6c32, U+6c69, U+6c74, U+6c85, U+6ca3, U+6cb1, U+6cd7, U+6cef, U+6d0c, U+6d5c, U+6d63, U+6e9f, U+6f15, U+6f5e, U+6fb9, U+6fc2, U+6fee, U+7080, U+70ef, U+70f7, U+71a0, U+71b5, U+724d, U+7325, U+737e, U+7579, U+7601, U+7634, U+765e, U+768e, U+7699, U+76f9, U+7762, U+7791, U+77ad, U+7827, U+78b4, U+7950, U+7957, U+7b94-7b95, U+7bb4, U+7bc6, U+7bdd, U+7c26, U+7c2a, U+7cbc, U+7cef, U+7ea3, U+7ead, U+7ebe, U+7f1c, U+7f42, U+8004, U+80c4, U+80eb, U+80ed, U+814c, U+81ca, U+81e7, U+8200, U+8210, U+828b, U+828d, U+8364, U+8368, U+839e, U+8431, U+84bf, U+84df, U+8568, U+866c, U+86c6, U+86ed, U+86f3, U+8703, U+8725, U+87b3, U+87d1, U+87e0, U+87ee, U+8821, U+8862, U+88e8, U+891b, U+8934, U+8bd2, U+8bff, U+8c14, U+8c1d, U+8c21, U+8c4c, U+8c7a, U+8c82, U+8e69, U+8f8f, U+8fe9, U+904e, U+90c5, U+915a, U+92ae, U+949a-949b, U+94e0, U+950f, U+9530, U+953a, U+9542, U+954c, U+9550, U+956d, U+9616, U+968d, U+96bd, U+972d, U+973e, U+97ed, U+98d2, U+98d5, U+9955, U+9968, U+9980, U+9990, U+9995, U+9a78, U+9ab0, U+9b03, U+9b47, U+9c88, U+9c91, U+9e35, U+9e44, U+9e51, U+9e6b, U+9ebe;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.22.woff2) format('woff2');
+ unicode-range: U+4f32, U+4f57, U+4f97, U+4fe6, U+507b, U+50ee, U+5106, U+51c7, U+520d, U+5241, U+535e, U+5453, U+54a3, U+550f, U+5530, U+5555, U+5577, U+559f, U+55b5, U+55d1, U+5601, U+562d, U+5659, U+566b, U+56e4, U+5773, U+57fd, U+5892, U+5925, U+592f, U+5958, U+59ab, U+5a40, U+5abe, U+5b34, U+5bee, U+5ccb, U+5d02, U+5d99, U+5e7a, U+5e8b, U+5e91, U+5ea0, U+5f01, U+5f08, U+6035, U+6078, U+6120, U+61d1, U+621b, U+626a, U+62ee, U+631e, U+6387, U+63b8, U+643d, U+64e2, U+659b, U+6631, U+6654, U+6748, U+679e, U+67b8, U+67da, U+67e9, U+693d, U+699b, U+69c1, U+6a50, U+6b46, U+6b81, U+6b92-6b93, U+6c30, U+6c8f, U+6cd3, U+6cfe, U+6d9e, U+6dae, U+6dbf, U+6dfc, U+6e4e, U+6ec2, U+6ed3, U+6ee6, U+6f62, U+6fe1, U+70e8, U+71a8, U+71d4, U+71ee, U+732c, U+736d, U+73de, U+7425, U+7428, U+757f, U+75b8, U+765c, U+7678, U+7768, U+7837, U+7949, U+7a88, U+7b1e, U+7b60, U+7ba9, U+7c91, U+7efa-7efb, U+7efe, U+7f08, U+7f25, U+7f2b, U+7f44, U+7fca, U+80bd, U+80ef, U+8174, U+8191, U+81c3, U+81fe, U+8207, U+822b, U+826e, U+82aa, U+82b7, U+82f7, U+82fb, U+8301, U+8369, U+836d, U+837b, U+8398, U+83e0, U+84d1, U+85dc, U+867b, U+869c, U+86a9, U+86b1, U+86c9, U+86ce, U+8734, U+876e, U+8882, U+8996, U+89ca, U+89ce, U+89d0, U+89e5, U+89ef, U+8bab, U+8bcb, U+8bdc, U+8be4, U+8bf3, U+8c16-8c18, U+8d4a, U+8d73, U+8e39, U+8e76, U+8fe8, U+8ff3, U+9005, U+905b, U+90ba, U+90cf, U+9131, U+916f, U+91af, U+92c8, U+94b0, U+94db, U+94e1, U+954d, U+9563, U+9573, U+95f1, U+967d, U+96c9, U+97af, U+98a7, U+98e7, U+996a, U+997d, U+9991, U+9a81, U+9a88, U+9aa7, U+9ad4, U+9cc5, U+9cdd, U+9e6d, U+9f87, U+9f8a, U+9f8c, U+9fa2;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.23.woff2) format('woff2');
+ unicode-range: U+4e69, U+4ee8, U+4f58, U+4f5e, U+4fea, U+50d6, U+5208, U+5250, U+525c, U+5476, U+54a4, U+54a9, U+54bf, U+54c2, U+5550, U+5576, U+55dd, U+55ea, U+55f2, U+55f5, U+5639, U+5654, U+5658, U+56e1, U+56ff, U+57a9, U+58f9, U+598d, U+59e3, U+5a23, U+5b51, U+5ba5, U+5cab, U+5cb7, U+5cd2, U+5d34, U+5d58, U+5e3c, U+5f11, U+5f95, U+5fdd, U+6029, U+603c, U+607d, U+610e, U+6175, U+61d4, U+629f, U+63c4, U+63c6, U+6421, U+6441, U+64b7, U+65ab, U+6615, U+6657, U+66b9, U+6775, U+6809, U+680e, U+684e, U+688f, U+6942, U+696b, U+6979, U+6989, U+6a3d-6a3e, U+6a84, U+6cc5, U+6cf8, U+6d39, U+6d94, U+6dc5, U+6de6, U+6ee2, U+6f4d, U+6fa7, U+6fef, U+723b, U+7284, U+7292, U+729f, U+72b7, U+72fb, U+7315, U+7360, U+742c, U+7441, U+7480, U+74a8, U+7566, U+75ff, U+7619, U+76e5, U+77fe, U+782d, U+783a, U+787c, U+789b, U+78a3, U+795a, U+7a95, U+7ad1, U+7ae6, U+7b25, U+7bd9, U+7c95, U+7ec9, U+7f45, U+7fe6, U+80db, U+80dd, U+80ea, U+80f4, U+814e, U+821b, U+827f, U+82a9, U+82c1, U+82e3, U+82eb, U+830f, U+832f, U+852b, U+858f, U+8707, U+871a, U+87a8, U+8839, U+883c, U+8869, U+8872, U+88df, U+8a48, U+8ba3, U+8bb4, U+8bcc, U+8be8, U+8bee, U+8c36, U+8d32, U+8d5d, U+8d6d, U+8dba, U+8e2e, U+8f71, U+8f94, U+8fe4, U+9082, U+9095, U+909d, U+90e2, U+914a, U+9162, U+919b, U+936a, U+948d, U+949c, U+94b4, U+94c2, U+94e3-94e4, U+94e8-94e9, U+94f0-94f1, U+951f, U+9528, U+9532, U+9537, U+95f6, U+95ff, U+9604, U+9608, U+9642, U+9701, U+970f, U+9730, U+9753, U+98e8, U+996f, U+9984, U+998a, U+998f, U+9997, U+99a5, U+9a9b, U+9ae1, U+9b51, U+9c7f, U+9c9f, U+9e2c, U+9e4c, U+9e57-9e58, U+9e82, U+9e8b, U+9e92, U+9f85;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.24.woff2) format('woff2');
+ unicode-range: U+4ec3, U+4f09, U+4fce, U+4fe3, U+4ff3, U+501c, U+50a5, U+5156, U+52d6, U+5326, U+539d, U+5464, U+5501, U+5591, U+59aa, U+59b2, U+59d8, U+5a55, U+5ab8, U+5b17, U+5b37, U+5b71, U+5b73, U+5c50, U+5cc1, U+5ce5, U+5d06, U+5d82, U+5e44, U+5ebe, U+5f2d, U+5fad, U+5ff8, U+608c, U+6215, U+6221, U+63ae, U+63ff, U+65d6, U+6636, U+6772, U+6860, U+69ab, U+69ed, U+6a5b, U+6b59, U+6c24, U+6c29, U+6ca4, U+6cf1, U+6cf7, U+6d43, U+6d54, U+6dec, U+6e0c, U+6e1a, U+6e5f, U+6eb4, U+7094, U+709c, U+70c3, U+70ca, U+70e9, U+7113, U+7168, U+7172, U+71e7, U+7230, U+7337, U+7511, U+75c2, U+75c8, U+75e4, U+75e8, U+77f8, U+7812, U+7823, U+7826, U+784e, U+7852, U+789c, U+7934, U+795c, U+79e3, U+7a17, U+7a2e, U+7a39, U+7aa3, U+7ab8, U+7afd, U+7b0f, U+7b15, U+7b24, U+7b2b, U+7bfe, U+7cb2, U+7d50, U+7ea5, U+7ecc, U+7ee6, U+7f19, U+7f22, U+7faf, U+7fbf, U+7ff3, U+8026, U+8028, U+8093, U+80b1, U+8198, U+8238, U+8244, U+82a8, U+82cb, U+82e1, U+8311, U+8385-8386, U+83cf, U+847a, U+84d6, U+85ae, U+865b, U+8662, U+869d, U+86a8, U+86b4, U+86de, U+86f4, U+870a, U+8748, U+87ea, U+886e, U+8888, U+88dc, U+88f1, U+8913, U+8921, U+8983, U+8a8a, U+8b07, U+8b8a, U+8bd3, U+8bd6, U+8bdf, U+8c32, U+8c55, U+8cea, U+8d5c, U+8d84, U+8d94, U+8df8, U+8e74, U+8f6d, U+9021, U+9068, U+9088, U+908b, U+909b, U+90e7, U+9146, U+91b4, U+933e, U+9397, U+93d6, U+93e1, U+94a8, U+94c9, U+9502-9503, U+9509, U+9534, U+954f, U+9577, U+9593, U+95fc, U+960b, U+9615, U+9670, U+9672, U+9697, U+9765, U+985e, U+988f, U+98a6, U+98da, U+9994, U+9a85, U+9a8a, U+9a9e, U+9ab6, U+9aed, U+9c82, U+9e22, U+9e28, U+9e6c, U+9ec3, U+9f10, U+9f39, U+9f89;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.25.woff2) format('woff2');
+ unicode-range: U+4f5d, U+4f7b, U+5028, U+520e, U+52ac-52ad, U+53a3, U+5421, U+544b, U+5454, U+54ad, U+54d0, U+556d, U+55c4, U+560c, U+5623, U+5627, U+5671, U+56df, U+56eb, U+573b, U+58c5, U+5924, U+5997, U+5a0c, U+5a7a, U+5aaa, U+5ca2, U+5d27, U+5d2e, U+5fe4, U+5ffe, U+6041-6042, U+6079, U+622c, U+62bb, U+65c3, U+65ce, U+677c, U+67b0, U+68c2, U+69ce, U+69ff, U+6a2f, U+6b87, U+6b9a, U+6bc2, U+6bd6, U+6c05, U+6c1a, U+6c68, U+6d31, U+6d60, U+6dab, U+6ddd, U+6f46, U+6f78, U+6fc9, U+6fe0, U+704f, U+725d, U+7396, U+73ae, U+73c8, U+73cf, U+740a, U+7430, U+74e4, U+74ef, U+7572, U+75a5, U+761b, U+77cd, U+781d, U+7887, U+789a, U+7947, U+7a14, U+7a70, U+7bd1, U+7cbd, U+7ec0, U+7ef1, U+7f02, U+7f1b, U+7f26, U+7f2c, U+7f9f, U+7fd5, U+8052, U+80cd, U+810d, U+8171, U+8178, U+81c1, U+81ec, U+8202, U+8284, U+828e-828f, U+8297, U+82a1, U+82be, U+82cc, U+82dc, U+835e, U+8365, U+8392, U+83df, U+83f8, U+8438, U+8469, U+84af, U+85ff, U+867c, U+86a7, U+86c4, U+86e9, U+879f, U+87ab, U+8813, U+8816, U+887e, U+8941, U+898b, U+89de, U+8aaa, U+8ba6, U+8bc2, U+8bf9, U+8c20, U+8c2a, U+8c2f, U+8dcf, U+8e14, U+8e47, U+8e7c, U+8f03, U+8f87, U+900b, U+9036, U+9051, U+9062, U+9074, U+9084, U+90ac, U+90db, U+90e6, U+9123, U+912f, U+9169, U+91aa, U+938f, U+948f, U+9492, U+94a4, U+94bf, U+94f5, U+9536, U+9549, U+958b, U+95f3, U+960f, U+9612, U+9617, U+9621, U+96d2, U+97a3, U+984c, U+9880, U+989e, U+98a2, U+990d, U+9954, U+9967, U+9969, U+996b, U+9a57, U+9ac1, U+9acb, U+9b08, U+9b49, U+9c86, U+9c8e, U+9c9b, U+9ca2, U+9ca7, U+9cb6, U+9cd5, U+9e29-9e2a, U+9e39, U+9e5a, U+9e5c, U+9ecd, U+9ede, U+9ee9, U+9f83, U+9f86;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.26.woff2) format('woff2');
+ unicode-range: U+4e5c, U+4fa9, U+5088, U+50f3, U+51eb, U+535f, U+536e, U+5412, U+5466, U+5472, U+55c9, U+55cc-55cd, U+56f5, U+56f9, U+571c, U+5785, U+57ad, U+5800, U+580b, U+59af, U+59d2, U+59f9, U+5a09, U+5ae0, U+5c98, U+5ce4, U+5d3e, U+5d4a, U+5dfd, U+5e19, U+5e42, U+5ea5, U+5fea, U+6106, U+6308, U+6332, U+63bc, U+63f6, U+643f, U+64e4, U+65ee-65ef, U+66f7, U+6777, U+6787, U+678b, U+67a5, U+67b3, U+67de, U+67e2, U+6841, U+6849, U+69a7, U+69ca, U+6c18, U+6c2a, U+6c4a, U+6d6f, U+6daa, U+6e86, U+6f74, U+7116, U+7131, U+7256, U+7266, U+7350, U+73e9, U+742e, U+746d, U+759d, U+75fc, U+7618, U+77fd, U+7809, U+7829, U+786a, U+7893, U+78ec, U+79b3, U+7b0a, U+7b2a, U+7b2e, U+7b33, U+7b38, U+7b3e, U+7b9d, U+7bb8, U+7c1f, U+7ea1, U+7ea8, U+7eb0, U+7ed4, U+7f01, U+7f1f, U+7f36, U+8069, U+80bc, U+80e8, U+8132, U+816d, U+8188, U+8222, U+823b, U+82ab, U+82b0, U+82c4, U+82d5, U+8334, U+835b, U+839c, U+83a0, U+83b4, U+83b8, U+83c0, U+83c5, U+83d6, U+83ec, U+84ba, U+853a, U+8572, U+868b, U+86f1, U+870d, U+8722, U+8788, U+87db, U+880a, U+8832, U+88a2, U+88b7, U+88e2, U+88f0, U+8ad6, U+8b49, U+8ba7, U+8bb5, U+8bce, U+8bd4, U+8d4d, U+8db8, U+8dbf, U+8dce, U+8dde, U+8df9, U+8e05, U+8e3d, U+9016, U+9032, U+90c3, U+90d3, U+90ef, U+90f4, U+9122, U+919a, U+91a2, U+93ca, U+94b9, U+94c6, U+9511-9512, U+9515, U+954a, U+9552, U+9562, U+95dc, U+9603, U+9606, U+960c-960d, U+96f1, U+975b, U+97ea, U+9808, U+982d, U+98a8, U+990a, U+992e, U+9974, U+9993, U+9a14, U+9a77, U+9a93, U+9aa0, U+9ac2, U+9b23, U+9b3b, U+9b43, U+9b4d, U+9cca, U+9ccf, U+9cdf, U+9e37, U+9e46, U+9e55, U+9e67, U+9e69, U+9ebc, U+9efe, U+9f0b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.27.woff2) format('woff2');
+ unicode-range: U+4e47, U+4ede-4edf, U+4f25, U+4f64, U+4f70, U+4f76, U+4faa, U+50e6, U+51fc, U+5216, U+52a2, U+52d0, U+52f0, U+530f, U+531a, U+5363, U+538d, U+54b4, U+54d4, U+5541, U+5556, U+55fe, U+5704, U+572e, U+57d9, U+5941, U+5a06, U+5b6c, U+5b84, U+5be4, U+5c59, U+5cc4, U+5d03, U+5d6c, U+5d74, U+5e11, U+5eea, U+5f40, U+5f89, U+6004, U+6092, U+60ad, U+6100, U+610d, U+634c, U+63b4, U+63be, U+64c0, U+64d8, U+65c6, U+6600, U+665f, U+6710, U+67d8, U+6800, U+6861, U+6934, U+6987, U+69f2, U+6a17, U+6c21, U+6d19, U+6d5e, U+6d91, U+6e6b, U+6edf, U+709d, U+70b7, U+7198, U+71b3, U+726f, U+728d, U+72ce, U+736c, U+736f, U+73b3, U+73d0, U+7548, U+755a-755b, U+7596, U+75cd, U+763f, U+766f, U+7747, U+77ec, U+783b, U+784c, U+7850, U+7857, U+7877, U+78a1, U+78d4, U+7a1e, U+7a31, U+7b31, U+7b6e, U+7ba7, U+7bc0, U+7bea, U+7c74, U+7cb3, U+7cc1, U+7cc5, U+7d30, U+7da6, U+7e2f, U+7e47, U+7f03, U+7f17, U+7fb8, U+802a, U+8043, U+8084, U+809f, U+80ab, U+80d7, U+816b, U+8249, U+824f, U+829f, U+82ce, U+82e4, U+82f4, U+8331, U+83d4, U+859c, U+8655, U+867a, U+867f, U+86d1, U+86d8, U+872e, U+877c, U+87ad, U+87ca, U+8853, U+88e5, U+88fe, U+89f3, U+8a07, U+8a3a, U+8abf, U+8bf6, U+8c07, U+8c30, U+8c89, U+8d3d, U+8d45, U+8d67, U+8dc6, U+8dd7, U+8e5a, U+8f73, U+8f78, U+9026, U+9052, U+90a8, U+9104, U+91dd, U+9322, U+9485, U+94aa, U+94ba, U+94bc, U+94c4, U+94e7, U+9506, U+9529, U+9538, U+9567, U+95eb, U+96ce, U+96e0, U+9792, U+97ab, U+97b4, U+989b, U+98f2, U+9983, U+9a9c, U+9b2f, U+9c80, U+9c85, U+9c8b, U+9ca1, U+9cae, U+9cb0-9cb2, U+9e31, U+9e41-9e42, U+9e68, U+9ee2, U+9f0d, U+9f2c, U+9f51, U+9f80;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.28.woff2) format('woff2');
+ unicode-range: U+4e93, U+4eb3, U+4f27, U+4f65, U+4f94, U+4fc5, U+5025, U+502c, U+502e, U+507e, U+50a7, U+51bc, U+5452, U+54cc, U+54de, U+5533, U+553f, U+5549, U+5581, U+55be, U+560f, U+561e, U+564c, U+5768, U+57a1, U+5807, U+5889, U+5a67, U+5ad8, U+5af1, U+5b16, U+5cb5, U+5cbf, U+5d1e, U+5d9d, U+5e14, U+5edb, U+5f9c, U+6019, U+601b, U+602b, U+6126, U+614a, U+6206, U+6266, U+62ca, U+646d, U+64ba, U+6634, U+6677, U+668c, U+6753, U+67b5, U+6901, U+695d, U+6966, U+6978, U+69b1, U+6aa9, U+6b9b, U+6ce0, U+6d2e, U+6d33, U+6e11, U+6ec1, U+6f8d, U+705e, U+7110, U+712f, U+7145, U+7178, U+72ef, U+72f2, U+72f7, U+7322, U+73f2, U+748e, U+74f4, U+7519, U+7583, U+75b4, U+75f1, U+76cd, U+7726, U+7817, U+7839, U+7a80, U+7b04, U+7c9c-7c9d, U+7ca2, U+7d05, U+7d9d, U+7db2, U+7e3b, U+7e7b, U+7ef2, U+7f07, U+7f12, U+7f2f, U+7f31, U+7f58, U+7f5f, U+7f71, U+7f74, U+7f7e, U+7fa7, U+7fb0, U+8012, U+80b7, U+80c2, U+80fc, U+8118, U+815a, U+8166, U+81bb, U+81df, U+81e8, U+8228, U+827d, U+828a, U+82a4, U+8314, U+834f, U+8360, U+837d, U+83bc, U+83f9, U+83fd, U+840b, U+8411, U+8418, U+844e, U+846d, U+853b, U+85a8, U+85b9, U+8605, U+8616, U+86ac, U+86b6, U+86cf, U+8709, U+8723, U+8763, U+877d, U+87ac, U+87af, U+881b, U+887d, U+887f, U+88c9, U+88ce, U+88e1, U+88fc, U+892b, U+8a8d, U+8bfc, U+8de3, U+8deb, U+8e2f, U+8e70, U+8e85, U+8f15, U+9069, U+90fe, U+91a3, U+91b5, U+943e, U+948b-948c, U+9495, U+94a3, U+94ad, U+94cd, U+94f3, U+9517, U+9546, U+955b, U+955e, U+956b, U+9649, U+965f, U+96b3, U+96d6, U+97eb, U+988e, U+9ab1, U+9acc, U+9ad1, U+9b48, U+9ca0, U+9cd4, U+9cda, U+9ce2, U+9e2b, U+9e36, U+9eb8, U+9f17, U+9f19;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.29.woff2) format('woff2');
+ unicode-range: U+4eeb, U+506c, U+510b, U+5456, U+54d9, U+55b1, U+562c, U+567b, U+56af, U+581e, U+586c, U+5880, U+5ad2, U+5b32, U+5c25, U+5ca3, U+5d24, U+5d5b, U+5d5d, U+5d6f, U+5e0f, U+5e5b, U+5e80, U+5eb9, U+60b1, U+61b7, U+6217, U+6225, U+6339, U+6369, U+636d, U+6535, U+656b, U+66db, U+66e9, U+670a, U+6864, U+696e, U+69d4, U+6a18, U+6b39, U+6c5c, U+6c86, U+6cd4, U+6ceb, U+6cee, U+6cf6, U+6d7c, U+6e16, U+6e54, U+6e98, U+6ea7, U+6fb6, U+6fde, U+7023, U+7085, U+70b1, U+70bb, U+7173, U+71f9, U+72b8, U+72cd, U+730a, U+7317, U+738e, U+73a2, U+7477, U+74e0, U+752f, U+753e, U+7540, U+75a0, U+75b3, U+75e7, U+7654, U+76b4, U+76f1, U+7707, U+7743, U+7765, U+778b, U+77bd, U+77c7, U+7800, U+781c, U+7856, U+78d9, U+7955, U+7987, U+79eb, U+7a78, U+7aa8, U+7aad, U+7ab3, U+7b47, U+7baa, U+7bc1, U+7be6, U+7bef, U+7c7c, U+7cc7, U+7d04, U+7d44, U+7d71, U+7de9, U+7e8c, U+7ee8, U+7f21, U+7f23, U+8080, U+80ad, U+80d9, U+823e, U+8291, U+82ca, U+83a9-83aa, U+83d8, U+8451, U+845a, U+848c, U+84fc, U+8556, U+8629, U+863c, U+866e, U+868d, U+86b0, U+86f2, U+87bd, U+8844, U+88bc, U+88e3, U+890a, U+8930, U+89ba, U+89c0, U+8acb, U+8b1d, U+8c35, U+8d40, U+8e49, U+8f49, U+8f6b, U+8f8a, U+8f9a, U+8fd3, U+8fd5, U+9004, U+9011, U+902d, U+902f, U+9044, U+904b, U+90b0, U+911e, U+9143, U+9150, U+918d, U+91ad, U+928e, U+9487, U+948e, U+9494, U+94ab, U+94af, U+94cb, U+94d2, U+94ef, U+950a, U+951b-951c, U+9531, U+953c, U+953f, U+960a, U+96b1, U+96b9, U+96e2-96e3, U+9794, U+9838, U+9987, U+9a7a, U+9a7d, U+9ac0, U+9b1f, U+9b88, U+9c83, U+9c9a, U+9cc7, U+9cd9, U+9e3a, U+9e48, U+9e6a, U+9e6e, U+9e71, U+9e7e, U+9e87, U+9ee7;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.30.woff2) format('woff2');
+ unicode-range: U+4ee1, U+4f1b, U+4f89, U+4fdc, U+50ec, U+523f, U+5423, U+54cf, U+54ff, U+5522, U+55b9, U+5793, U+57b4, U+59a3, U+59dd, U+5b65, U+5c15, U+5c3b, U+5c9c, U+5d26, U+5d6b, U+5f58, U+609d, U+60ab, U+6434, U+6484, U+6549, U+65c4, U+65d2, U+65f0, U+6661, U+669d, U+66be, U+674c, U+676a, U+67d9, U+680c, U+6874, U+6939, U+698d, U+69e0, U+6a65, U+6a8e, U+6aa0, U+6b84, U+6b8d, U+6bb3, U+6c19, U+6da0, U+6e2b, U+6e53, U+6e8f, U+6eb2, U+6ef9, U+6f2f, U+717a, U+7228, U+72fa, U+7321, U+734d, U+7457, U+74a9, U+74ff, U+7513, U+754b, U+76a4, U+76b2, U+7719, U+772c, U+775a, U+7818, U+782c, U+7847, U+786d, U+78ba, U+78f4, U+7946, U+794e, U+7962, U+79ed, U+7a40, U+7a4d, U+7a86, U+7aac, U+7b4c, U+7b72, U+7ccc, U+7d0d, U+7d39, U+7dad, U+7dda, U+7e2e, U+7e54, U+7ee1, U+7f0c, U+7f11, U+7f27, U+7f68, U+7fa9, U+7fbc, U+7fd2, U+7fe5, U+809c, U+80e9, U+8108, U+8114, U+8139, U+8182, U+822f, U+825a, U+825f, U+82b4, U+82d2, U+8315, U+832d, U+8348, U+8366, U+8378, U+83a8, U+83b3, U+83e1, U+83ea, U+83f0, U+845c, U+84a1, U+84b4, U+84cd, U+8579, U+8585, U+85c1, U+8627, U+877e, U+87e5, U+885b, U+89da, U+8a3e, U+8a71, U+8c02, U+8c33, U+8c47, U+8c49, U+8ca2, U+8d49, U+8db5, U+8dd6, U+8dec, U+8df6, U+8e1f, U+8e40, U+8e53, U+8edf, U+8f82, U+8fa6, U+9023, U+9054, U+9078, U+907a, U+90b3, U+9139, U+917d, U+9190, U+9224, U+9490, U+94bd, U+94cc, U+94d1, U+9507, U+950d, U+9513-9514, U+9516, U+9518, U+951d-951e, U+952a, U+952c, U+9544-9545, U+9553, U+956a, U+956c, U+9580, U+9589, U+961a, U+97b2, U+97ff, U+9810, U+9867, U+986f, U+98cf, U+9a98, U+9adf, U+9b46, U+9c94, U+9ca5, U+9cb5, U+9cb7, U+9e32, U+9e38, U+9efc;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.31.woff2) format('woff2');
+ unicode-range: U+4ef5, U+4f74, U+4f91, U+50ba, U+5240, U+5261, U+5282, U+53fb, U+5416, U+5432, U+5459, U+54d3, U+5769, U+577c, U+57a7, U+5844, U+58bc, U+5981, U+5a08, U+5adc, U+5aeb, U+5b53, U+5c63, U+5cbd, U+5db7, U+5def, U+5ee8, U+5fbc, U+5fc9, U+6003, U+600d, U+603f, U+609b, U+6222, U+623d, U+63ce, U+6603, U+6769, U+6798, U+67a8, U+67f0, U+680a, U+6855, U+686b, U+6877, U+68f9, U+68fc, U+6b37, U+6b43, U+6bfd, U+6c06-6c07, U+6cad, U+6d07, U+6de0, U+6f4b, U+6f8c, U+70c0, U+71e0, U+7301, U+731e, U+7352, U+73c9, U+74ba, U+750f, U+754e, U+7594, U+760c, U+7630, U+77ef, U+7811, U+783c, U+78a5, U+78b2, U+78b6, U+78f2, U+794f, U+7967, U+79d5, U+7ac5, U+7b46, U+7ba8, U+7c21, U+7c40, U+7c64, U+7c8b, U+7ccd, U+7cd7, U+7ce8, U+7d61, U+7d66, U+7df4, U+7e3d, U+7e9b, U+7ebb, U+7f0b, U+7f0d, U+7f9d, U+800b, U+801c, U+806c, U+8167, U+81bd, U+8233-8234, U+8268, U+8288, U+82c8, U+8351, U+83b6, U+8401, U+8406, U+842c, U+8473, U+8476, U+8478, U+84ca, U+8564, U+8570, U+85b7, U+86b5, U+877b, U+878b, U+8793, U+87f2, U+88b4, U+8919, U+898f, U+8a08, U+8a13, U+8a2d, U+8a66, U+8a9e, U+8aa4, U+8b02, U+8b58, U+8b70, U+8b77, U+8b80, U+8b93, U+8c2e, U+8c3f, U+8c42, U+8c73, U+8c98, U+8c9d, U+8cc7, U+8dbc, U+8dfd, U+8f7e, U+8f8b, U+9060, U+90dc, U+9129, U+918c, U+91cb, U+94d9, U+950e, U+952b, U+953e, U+9554, U+9557, U+955d, U+966c, U+96a8, U+96b0, U+96fb, U+9708, U+97ac, U+9805, U+983b, U+9852, U+9878, U+989f, U+98a1, U+9a90, U+9a96, U+9aba, U+9af9, U+9b06, U+9c15, U+9c3d, U+9c56, U+9c67, U+9c72, U+9c8c, U+9cad, U+9cb3, U+9cd0, U+9ce1, U+9d70, U+9e2e, U+9e3b, U+9e47, U+9e4b, U+9e5b, U+9e63, U+9eb4, U+9ed2, U+9ee5;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.32.woff2) format('woff2');
+ unicode-range: U+4f7e, U+5107, U+5281, U+54da, U+56dd, U+5709, U+572f, U+5739, U+574c, U+577b, U+5786, U+57d2, U+57da, U+5819, U+584d, U+5c22, U+5c99, U+5e3b, U+5f56, U+5f82, U+6083, U+60dd, U+615d, U+6243, U+6420, U+6426, U+6499, U+661d, U+67fd, U+6832, U+68f0, U+691f-6920, U+6a28, U+6aab, U+6bf5, U+6c3d, U+6c94, U+6d0e, U+6d4d, U+6eb1, U+6eb7, U+6ebd, U+6f36, U+727e, U+72b4, U+72c1, U+72f4, U+7331, U+739f, U+73d9, U+75ac, U+76e1, U+7722, U+773e, U+7780, U+77fb, U+781f, U+78fb, U+7905, U+790c, U+790e, U+7953, U+7a69, U+7b5a, U+7bc4, U+7c9e, U+7cab, U+7d1a, U+7d55, U+7d5c, U+7e7c, U+7eae, U+7ec1-7ec2, U+7f0f, U+7f1e, U+7f35, U+7fd9, U+8071, U+80ec, U+8129, U+812b, U+8148, U+8173, U+819a, U+81a0, U+81bf, U+81e5, U+822d, U+824b, U+8298, U+8300, U+831b, U+8347, U+835c, U+83dd, U+83e5, U+840f, U+841c, U+8449, U+84cb, U+84da, U+8548, U+857b, U+8591, U+85da, U+85f4, U+8667, U+86ba, U+86f8, U+8731, U+8753, U+8770, U+8856, U+88fd, U+895e, U+897b, U+89c7, U+89cb, U+8a0e, U+8a18, U+8a31, U+8c8a, U+8c94, U+8caa, U+8cac, U+8d52, U+8d5f, U+8d91, U+8db1, U+8e2c, U+8e30, U+8e9e, U+8eca, U+8f09, U+8fee, U+8ff4, U+9031, U+908a, U+90a0, U+90bd, U+90d7, U+90ff, U+9117, U+915e, U+9161, U+9164, U+91a1, U+932f, U+936c, U+93ae, U+9486, U+94c8, U+94ca, U+94d6-94d7, U+94e6, U+954e, U+9560-9561, U+9568, U+95b1, U+9607, U+9654, U+9673, U+9678, U+9688, U+968e, U+96aa, U+96d9, U+96dc, U+96f0, U+975c, U+985f, U+9871, U+9899, U+9902, U+9918, U+9a5a, U+9a80, U+9a8e, U+9a99, U+9a9d, U+9aeb, U+9aee, U+9b18, U+9b8a, U+9ba0, U+9bae, U+9c47, U+9cb4, U+9cbd, U+9cdc, U+9d87, U+9e4e, U+9e88, U+9efb, U+9f29, U+9f8d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.33.woff2) format('woff2');
+ unicode-range: U+5233, U+5293, U+537a, U+5523, U+5588, U+5686, U+57b8, U+57dd, U+57e4, U+57ef, U+57f8, U+5881, U+5ab5, U+5e5e, U+5ed1, U+5fee, U+6067, U+620b, U+62f6, U+638a, U+63e0, U+641b, U+6445, U+6509, U+652e, U+6534, U+67d2, U+67dd, U+6833, U+6883, U+6a7c, U+6a97, U+6b82, U+6cd0, U+6cfa, U+72b0, U+72f3, U+741a, U+7610, U+7617, U+764d, U+771a, U+7787, U+778d, U+77e7, U+784f, U+7881, U+78c9, U+7919, U+7986, U+798a, U+79fe, U+7a13, U+7a1c, U+7b90, U+7b9c, U+7bac, U+7bcc, U+7be0, U+7c0b, U+7c0f, U+7c8e, U+7caf, U+7cde, U+7d77, U+7dae, U+7dca, U+7e20, U+7e94, U+7ed0, U+7fee, U+8035, U+804d, U+8072, U+807d, U+8112, U+811e, U+8158, U+81a9, U+81ac, U+81af, U+81cd, U+8201, U+8208, U+8256, U+8306-8307, U+8332, U+83c3, U+83e7, U+83ef, U+8490, U+8497, U+84a8, U+84b9, U+84c1, U+84d0, U+84e3, U+84e5, U+855e, U+85ed, U+865f, U+8729, U+873e, U+8765, U+889d, U+88aa, U+88d2, U+8907, U+8914, U+8966, U+89cf, U+89eb, U+89f8, U+8a72-8a73, U+8ac7, U+8ae1, U+8af8, U+8b5e, U+8b89, U+8c1e, U+8c2b, U+8c68, U+8c85, U+8c93, U+8ca0, U+8ca9, U+8cb4, U+8cbb-8cbc, U+8d59, U+8e41, U+8e60, U+8e6f, U+8e7b, U+8e90, U+8f36, U+8faf, U+8ffb, U+9079, U+9097, U+90e4, U+90eb, U+91c6, U+91d0, U+934f, U+93af, U+942e, U+94ac, U+94b8, U+94d5, U+94df, U+94eb, U+94f7, U+955f, U+962f, U+963c, U+9660, U+9674, U+969b, U+96de, U+96e9, U+9728, U+972a, U+9748, U+9806, U+9817, U+984f-9850, U+9883, U+98db, U+98ef, U+9978, U+997e, U+9998, U+9a69, U+9aa2, U+9b31, U+9b5f, U+9b9f, U+9c8f-9c90, U+9c95, U+9ca6, U+9ca9, U+9cbb, U+9cbf, U+9cc8, U+9cd1, U+9cf4, U+9dc9, U+9ddf, U+9e30, U+9ea5, U+9ebf, U+9edf, U+9ef9, U+9f02, U+9f82;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.34.woff2) format('woff2');
+ unicode-range: U+4ec2, U+4edd, U+5155, U+551b, U+564d, U+572c, U+576d, U+57a4, U+57cf, U+57d5, U+57d8, U+57ed, U+57f4, U+580d, U+5820, U+593c, U+59a4, U+5c66, U+5fed, U+619d, U+63f8, U+64d0, U+67c1, U+6844, U+6910, U+6c46, U+6c54, U+6d2b, U+6ecf, U+721d, U+72c3, U+7339, U+73e7, U+7481, U+7625, U+7633, U+7635, U+7643, U+76e4, U+7704, U+770a, U+770d, U+7843, U+78fe, U+7913, U+7942, U+799b, U+7b74, U+7b78, U+7c33, U+7d00, U+7d2c, U+7d41-7d42, U+7d72, U+7d9c, U+7db1, U+7de1, U+7e78, U+7e96, U+7ea9, U+7ecb, U+7ed6, U+7f33, U+7f3b, U+7fdb, U+805e, U+80e0, U+812c, U+8160, U+8169, U+81ab, U+81ae, U+81c5, U+81c9, U+81cc, U+8204, U+8209, U+830c, U+8316, U+8477, U+84bd, U+84ee, U+8500, U+850c, U+850e, U+852f, U+857a, U+857f, U+85a4, U+8607, U+860b, U+8661, U+8701, U+8766, U+8798, U+87b5, U+87eb, U+8803, U+880b, U+8886, U+888a, U+8893, U+889b, U+88dd, U+89a9, U+8a09, U+8a22, U+8a55, U+8a5e, U+8a7e, U+8a8c, U+8b34, U+8b39, U+8b9f, U+8bea, U+8c90, U+8c99, U+8d06-8d07, U+8d33, U+8d36, U+8d55, U+8da8, U+8dbd, U+8e50, U+8e68, U+8e9c, U+8f14, U+8f33, U+8f4e, U+8f79-8f7a, U+8f80, U+8fb2, U+90a1, U+90b4, U+90be, U+90c4, U+9172, U+917a, U+9240-9241, U+9280, U+92a7, U+92ec, U+9304, U+934b, U+9369, U+93b0, U+9418, U+9451, U+94b2, U+94d3, U+94ea, U+9628, U+963d, U+9663, U+968a, U+96f2, U+9705, U+9711, U+9766, U+9770, U+9778, U+97a1, U+97ae, U+9818, U+982b, U+9857, U+992c, U+9979, U+99ee, U+9a03, U+9a75, U+9a83, U+9ac6, U+9b02, U+9b32, U+9ba1, U+9ba3, U+9bd4, U+9bee, U+9c1c, U+9c21, U+9c89, U+9c9e, U+9cc0, U+9d25, U+9d73, U+9e0a, U+9e61, U+9e7c-9e7d, U+9e84, U+9f2f, U+9f37, U+9f7e, U+9f81, U+9fa0;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.35.woff2) format('woff2');
+ unicode-range: U+553c, U+575c, U+576b, U+5c88, U+605d, U+6343, U+67a7, U+6980, U+6d27, U+6ee0, U+6f72, U+6f89, U+750d, U+7615, U+772d, U+7752, U+777a, U+77a2, U+7871, U+791e, U+796b, U+798d, U+79bf, U+7aa9, U+7b30, U+7b4d, U+7b96, U+7ba6, U+7bda, U+7be5, U+7c65, U+7c8c, U+7c9a, U+7d14, U+7d19, U+7d24, U+7d45, U+7d7c-7d7d, U+7de3, U+7e31, U+7e6b, U+7e81, U+7ee0, U+7f3d, U+7f63, U+7f7d, U+7fb6, U+7fe7, U+7ff9, U+8016, U+8027, U+8031, U+8056, U+805b, U+806d, U+806f, U+8077, U+808f, U+812e, U+81a6, U+81b6, U+81b9, U+81cf, U+81dc, U+8216, U+8221, U+8308, U+8310, U+833c, U+8396, U+83a4, U+83d1, U+8429, U+844c, U+8470, U+8545, U+8599, U+8652, U+871e, U+8764, U+8797, U+879d, U+885d, U+88a3, U+88a7, U+88c8, U+89cc-89cd, U+89d4, U+8a04, U+8a0a, U+8a17, U+8a19, U+8a62, U+8a96, U+8a98, U+8ab2, U+8af9, U+8b3f, U+8c50, U+8c6c, U+8c8f, U+8ca7, U+8cb7, U+8cc8, U+8ce6, U+8cf4, U+8d05, U+8d46-8d47, U+8dd0, U+8e23, U+8e45, U+8e5f, U+8e84, U+8ebc, U+8ecc, U+8f13, U+8f38, U+8fbb, U+8fef, U+903f, U+9046, U+9058, U+9072, U+90b2, U+90b6, U+90c7, U+90d5, U+90d9, U+911a, U+912c, U+9156, U+9179, U+9185, U+91e4, U+9226, U+9264, U+92b3, U+92f5, U+92f9, U+9375, U+93ad, U+9423, U+943b, U+9498, U+94cf, U+94da, U+94fc, U+9559, U+9569, U+9571, U+9574, U+9592, U+959f, U+95a4, U+95ae, U+95c6-95c7, U+9618, U+9641, U+9667, U+96bb, U+97fb, U+9863, U+9869, U+98a5, U+98d1, U+98d7, U+98fd, U+9917, U+994b, U+99ac, U+99da, U+9a3e, U+9a95, U+9b4b, U+9b80, U+9b84, U+9bc6, U+9bd2, U+9bdd, U+9c01, U+9c28, U+9c32, U+9c64, U+9c6f, U+9c75, U+9c99, U+9cc1, U+9cd3, U+9cd8, U+9e40, U+9e79, U+9e91, U+9ee8, U+9f41, U+9f52, U+9f61;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.36.woff2) format('woff2');
+ unicode-range: U+4ec9, U+4ef3, U+5290, U+54d5, U+552a, U+5eb3, U+5ed2, U+640b, U+681d, U+6baa, U+6c15, U+6cd6, U+6d1a, U+6ebb, U+6ed7, U+7039, U+728b, U+75e6, U+76c7, U+76e3, U+7730, U+7733, U+7735, U+774f, U+7793, U+77d4, U+77de, U+785a, U+7895, U+7921, U+7926, U+7954, U+796a, U+797c, U+798b, U+7998, U+79f5, U+7a03, U+7a48-7a4a, U+7b1f, U+7b39, U+7b45, U+7b58, U+7b62, U+7ba0, U+7be9, U+7bf8, U+7c3e, U+7cc8, U+7d6a, U+7d8e, U+7dd2, U+7ef9, U+7f76, U+7f91, U+7fc0, U+7fc3, U+8029, U+80f2, U+8105, U+8144, U+81ad, U+81b5, U+81ce, U+81d1-81d2, U+81fa, U+8232, U+825e, U+82fe-82ff, U+833a, U+839b, U+83be, U+83cd, U+83e2, U+8459, U+8474, U+84b7, U+84bc, U+8502, U+8538, U+8557, U+8561, U+85bf, U+85de, U+873a, U+8758, U+875f, U+87ec, U+8852, U+8889, U+8891, U+88a0, U+88a9, U+8955, U+8962, U+89dd, U+89f1, U+8a02, U+8a12, U+8a1a, U+8b1b, U+8b3a, U+8b62, U+8b9d, U+8bd0, U+8c09, U+8c9e, U+8caf, U+8ce3, U+8ce8, U+8cf8, U+8cfc, U+8d95, U+8da5, U+8da9, U+8dcd, U+8dd3, U+8e64, U+8e94, U+8ecd, U+8ef8, U+8eff, U+8f58, U+8f75, U+900c, U+904a, U+9055, U+905e, U+90bf, U+90d0, U+9109, U+9130, U+918a, U+91bf, U+91d8, U+9227-9229, U+92fc, U+93f0, U+9413, U+9481, U+953d, U+9548, U+955a, U+9583, U+95b7, U+95c5, U+95ca, U+9683, U+96d4, U+971a, U+9793, U+97e5, U+9802-9803, U+9809, U+9820, U+98e2, U+9951, U+9958, U+9982, U+99f5, U+99f8, U+9a40, U+9a45, U+9a9f, U+9aaf, U+9ad2, U+9ae4, U+9b0f, U+9b1b, U+9b5a, U+9bbb, U+9c09, U+9c2a, U+9c65, U+9c7e, U+9c84, U+9c8a, U+9c9d, U+9ca3, U+9cc6, U+9cc9, U+9ce4, U+9cf0, U+9d2b, U+9d31, U+9d8e, U+9e5f, U+9e97, U+9ec9, U+9eea, U+9ef4, U+9f9c, U+9fa4;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.37.woff2) format('woff2');
+ unicode-range: U+522d, U+525e, U+54dc, U+5f61, U+6322, U+638e, U+63de, U+63f2, U+6971, U+6a91, U+6c0d, U+7303, U+75d6, U+7605, U+760a, U+763c, U+770e, U+7725, U+772b, U+7746, U+774a, U+775e, U+776a, U+77bc, U+7822, U+7832, U+7841, U+78bc, U+798e, U+7991, U+79a6, U+79ec, U+7a05, U+7a16, U+7a1f, U+7a6a, U+7a8b, U+7ac7, U+7b07, U+7b66, U+7b70, U+7b85, U+7ba2, U+7bc2, U+7c30, U+7c60, U+7ca1, U+7ca3, U+7ca9, U+7cba, U+7cc0, U+7d5b, U+7d96, U+7da0, U+7ddb, U+7de8, U+7e21, U+7e2b, U+7e3f, U+7e50, U+7f0a, U+7feb, U+8060, U+8074, U+8085, U+812d, U+8159, U+820a, U+8246, U+8248, U+8337, U+8345, U+83c9, U+83f5, U+8487, U+84be, U+84c7, U+84cf, U+84e0, U+84f0, U+84f4, U+8514, U+851f, U+855a, U+85b3, U+85db, U+8606, U+862d, U+866f, U+86a2, U+86e3, U+877f-8780, U+87ed, U+8883, U+889a, U+889e, U+88cf, U+890b, U+8927, U+892f, U+89aa, U+89d6, U+8a34, U+8a63, U+8b26, U+8b95, U+8b9a, U+8bac, U+8ca1, U+8cee, U+8d0f, U+8d20, U+8d57, U+8de1, U+8dfc, U+8e10, U+8e21, U+8e26, U+8e7e, U+8ec5, U+8ed3, U+8f3e, U+905d, U+9061, U+906f, U+9086, U+90cb, U+911c, U+9126, U+9142, U+9147, U+914e, U+9174, U+919c, U+91d9, U+9244-9245, U+924f, U+92b7, U+9306, U+930f, U+931e, U+938c, U+940f, U+9468, U+94b7, U+94e5, U+956e, U+9572, U+95a3, U+95b6, U+95c9, U+9613, U+961b, U+965e, U+9684, U+96ee, U+9749, U+9763, U+9779-977a, U+977f, U+97a8, U+97f0, U+97f2, U+9801, U+98d6, U+98e9, U+98ed, U+9916, U+99f0, U+9a3b, U+9a5f, U+9ae3, U+9af3, U+9b7e, U+9bd5, U+9c92, U+9caa, U+9caf, U+9d95, U+9dba, U+9dc3, U+9e02, U+9e6f, U+9e83, U+9e86, U+9e90, U+9e95, U+9e9a, U+9e9c, U+9ea8, U+9eb9, U+9f22, U+9f31, U+9f67, U+9f6e, U+9f78, U+9f7b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.38.woff2) format('woff2');
+ unicode-range: U+5181, U+5e31, U+6224, U+6bf3, U+75b0, U+75c4, U+76e6, U+7744, U+7786, U+78bb, U+78dc, U+78e1, U+7904, U+79a3, U+79b1, U+79f1, U+7a94, U+7add, U+7b2d, U+7b4a, U+7b7c, U+7bc9, U+7bf0, U+7c8a, U+7c8f, U+7cf7, U+7d17, U+7d1b, U+7d2e, U+7d43, U+7d6b, U+7d7a, U+7d7f, U+7d88, U+7dbc, U+7dbf, U+7def, U+7e98, U+7f32, U+7fba, U+7fc9, U+7fec, U+8022, U+80f5, U+8126-8127, U+813a, U+816a, U+817d, U+81c7, U+81cb, U+81d0, U+81d3, U+81e2, U+8266, U+8296, U+82e0, U+82e7, U+831a, U+831d, U+8323, U+8344, U+83d2, U+83f4, U+844d, U+845e, U+846f, U+847b, U+8489, U+84e1, U+84ef, U+8523, U+8526, U+855d, U+85d9, U+85ec, U+8698, U+86da, U+86ef, U+870f, U+8714, U+8740, U+877a, U+8795, U+87a3, U+87d3, U+87fb, U+8836, U+88a5, U+88c0, U+894d, U+8972, U+8997, U+89dc, U+89fc, U+89ff, U+8a5d, U+8a65, U+8a67, U+8a69, U+8a7c, U+8aa5, U+8add, U+8ae5, U+8b31, U+8b5f, U+8b9e, U+8c40, U+8c8d, U+8ca8, U+8cc0, U+8cf2, U+8da7, U+8dc2, U+8dc9, U+8e18, U+8e27, U+8e77, U+8e8d, U+8ed2, U+8f0b, U+8f2a, U+8f8c, U+8f92, U+8fb5, U+8fbc, U+8fcf, U+9059, U+9085, U+9089, U+90de, U+90ea, U+9118, U+9120, U+9136, U+9141, U+917e, U+91a8, U+91b2, U+91c0, U+9207, U+920d, U+923e-923f, U+92ca, U+92fe, U+932b, U+934a, U+93d8, U+9407, U+9483, U+94de, U+94fb, U+94fd, U+9558, U+9597, U+95c0, U+95c4, U+96a4, U+96da, U+96df, U+9727, U+979a, U+97cc, U+97fa, U+980d-980e, U+9828, U+9835, U+984d, U+985d, U+986b-986c, U+98d4, U+9908, U+99a7, U+9a92, U+9aff, U+9b0b, U+9b8d, U+9bbc, U+9be1, U+9cb9, U+9ce3, U+9d03, U+9d23, U+9d26, U+9d3f, U+9d9d, U+9de3, U+9e80, U+9e89-9e8a, U+9ea3-9ea4, U+9eaf, U+9f08, U+9f36, U+9f4b, U+9f4f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.39.woff2) format('woff2');
+ unicode-range: U+4f67, U+63ad, U+67c3, U+6bf9, U+6ca9, U+6cb2, U+7338, U+76dc-76dd, U+7739, U+7756, U+77dd, U+77f0, U+7859, U+78e5, U+78eb, U+794b, U+7966, U+796e, U+799c, U+79a0, U+79ab-79ac, U+7a02, U+7a1b, U+7ada, U+7af6, U+7b16, U+7b27, U+7baf, U+7bbe, U+7be4, U+7bf2, U+7c22, U+7c37, U+7c3b, U+7c4c, U+7c53, U+7c8d, U+7c90, U+7ca6, U+7cad, U+7ce2, U+7cf0, U+7cf5, U+7d03, U+7d16, U+7d29, U+7d35, U+7d59, U+7d8d, U+7e15, U+7e5f, U+7e68, U+7e7a, U+7e84, U+7f4b, U+7f77, U+7fc2, U+7fdc, U+8066, U+80ca, U+811d, U+8130, U+8136, U+81b0, U+81b2, U+8274, U+8283, U+82d8, U+82fd, U+830a, U+83bf, U+83c2, U+83c6, U+83eb, U+8466, U+849e, U+84de, U+84fa, U+8542, U+85a2, U+85a6, U+85be, U+85d7, U+85e0, U+85e7, U+85f7, U+879e, U+8806, U+883b, U+8880, U+8890, U+88b5, U+88ef, U+8931-8932, U+8935, U+8946, U+8971, U+8985, U+898d, U+8a0c, U+8a1b, U+8a2a, U+8a64, U+8a7f, U+8ac4, U+8b53, U+8b5c, U+8b8f, U+8c48, U+8c4e, U+8ce2, U+8cf9, U+8da6, U+8dc5, U+8dca, U+8e06, U+8e3a, U+8e54, U+8ec8, U+8ece, U+8ed0, U+8f6a, U+8ffa, U+9077, U+9087, U+9098, U+9124, U+9133, U+9166, U+91b0, U+91be, U+91db, U+9223, U+9231, U+9236, U+935b, U+9366, U+93cf, U+9435, U+9455, U+945f, U+94b6, U+94d4, U+9533, U+9564-9566, U+959b, U+95af, U+95ba-95bb, U+95d2, U+9659, U+9682, U+96b8, U+972e, U+9733, U+980c, U+9830, U+9846, U+9851, U+986a, U+988b, U+98bc, U+98fc, U+9905, U+9926, U+99d5, U+99dd, U+9a4c, U+9a58, U+9b81, U+9ba8, U+9c20, U+9c39, U+9c63, U+9c97, U+9cbc, U+9d28, U+9d2a, U+9d40, U+9d72, U+9d84, U+9d92, U+9d97, U+9d9c, U+9d9f, U+9de5, U+9de7, U+9df1-9df2, U+9df9, U+9e4d, U+9e53, U+9e96, U+9f44, U+9f4a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.40.woff2) format('woff2');
+ unicode-range: U+74de, U+7706, U+7760, U+7790, U+77ab, U+77c5, U+77ca, U+77d8, U+77da, U+77e1, U+787d, U+7883, U+78ff, U+7908, U+791c, U+7983, U+79d4, U+79f2, U+7a7b, U+7aae, U+7ac4, U+7b17, U+7b87, U+7b98, U+7bbd, U+7c0d, U+7c1c, U+7c42, U+7c50, U+7cb7, U+7d4f, U+7d68, U+7d79, U+7d91, U+7dcc, U+7df7, U+7dfb, U+7e3e, U+7e49, U+7e59, U+7e95, U+7f41, U+7f85, U+7f87, U+7fd0, U+7fef, U+8008, U+800e, U+8063, U+8070, U+8119, U+811b, U+8137, U+813b-813c, U+8157, U+8195, U+81d8, U+81db, U+8250, U+825c, U+8277, U+82d9, U+839a, U+840a, U+8417, U+8458, U+8462, U+8479, U+84c2, U+8525, U+8532, U+858b, U+85cd, U+85d8, U+85dd, U+863f, U+86ec, U+86f7, U+8711, U+8781, U+879a, U+87a4, U+883e, U+8842, U+884b, U+8887, U+888c, U+8894, U+88a6, U+88a8, U+88bf, U+88f2, U+8982, U+8a03, U+8a0b, U+8a15, U+8a1d, U+8a60, U+8a6b-8a6c, U+8a6e, U+8a7b, U+8aa0, U+8ab3, U+8ac6, U+8b2c, U+8b43-8b44, U+8b6f, U+8b7d, U+8bb1, U+8cdc, U+8cf0, U+8d08, U+8dae, U+8e63, U+8e71, U+8ec3, U+8ed9, U+8ee0-8ee2, U+8f29, U+8f5d, U+8fad, U+905c, U+90c0, U+90c8, U+90f5, U+9127, U+912b, U+9137, U+913f-9140, U+91e1-91e2, U+9243, U+9250, U+92b6, U+92d0, U+92f8, U+9310, U+934d-934e, U+9367, U+937c, U+9396, U+93e6, U+9496, U+9575, U+95ad, U+95c3, U+95e2, U+9657, U+967c, U+976d, U+9797, U+97c8, U+97f1, U+9839, U+984e, U+9858, U+9873, U+9901, U+9903, U+9931, U+9935, U+9989, U+99ae, U+99b3, U+99db, U+9a0e, U+9a19, U+9a3a, U+9a4a, U+9a59, U+9aab, U+9ab3, U+9ab9, U+9ae0, U+9ae5, U+9bd9-9bda, U+9c1f, U+9c49, U+9cd2, U+9cdb, U+9d1f, U+9d2e, U+9d32, U+9d37, U+9da1, U+9df7, U+9e00, U+9e8e, U+9ea1, U+9ea7, U+9f30, U+9f92;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.41.woff2) format('woff2');
+ unicode-range: U+54f3, U+589a, U+5c7a, U+640c, U+64d7, U+6957, U+6f24, U+728f, U+76d5, U+76e9, U+76eb, U+76fb, U+7716, U+771c, U+7795, U+77b7, U+77c4, U+77ce, U+77d9, U+781b, U+782e, U+7848, U+78e6, U+790b, U+7928, U+7943, U+7972, U+797b, U+79a2, U+79a5, U+7a06, U+7a2d, U+7a8a, U+7a8c, U+7aaa, U+7abc, U+7acf, U+7b48, U+7b7b, U+7b7d, U+7bf4, U+7bfc, U+7c25, U+7c3c, U+7c44, U+7c46-7c47, U+7c72, U+7cf4, U+7d0f, U+7d7e, U+7d9f, U+7db5, U+7ddc, U+7de0, U+7e22, U+7e4c, U+7e51-7e52, U+7e91, U+7eb4, U+7f48, U+7f75, U+7fda, U+8025, U+8030, U+805c, U+8067, U+807a, U+80a3, U+80bb, U+80d1, U+80d4, U+80fe, U+810e, U+811c, U+8128, U+81bc, U+81ee, U+8223, U+8255, U+8264, U+8267, U+82f2, U+82fc, U+8356, U+836c, U+83bb, U+8483, U+84e8, U+84f5, U+84fe, U+854c, U+8580, U+85c7, U+85e6, U+8640, U+8656-8657, U+8670, U+8688, U+8696, U+86e1, U+86fb, U+870c, U+870e, U+8728, U+875d, U+8779, U+87ff, U+8814, U+8819, U+882d, U+8837, U+887c, U+8897, U+890f, U+8926, U+8939, U+896c, U+8976, U+8990, U+89fd, U+8a1f, U+8a6f, U+8ab4, U+8ad3, U+8b0f, U+8b27, U+8b2a, U+8b41, U+8ca4, U+8d6a, U+8dd8, U+8e16, U+8e2b, U+8e7d, U+8ec6, U+8ec9, U+8edb, U+8f08, U+8f34, U+911b, U+9121, U+9168, U+9191, U+9196, U+92fb, U+9351, U+93aa, U+93c2, U+93c9, U+93d5, U+9430, U+945b, U+95d5, U+96ca, U+97a6-97a7, U+97c2, U+9853, U+98c6, U+98d0, U+994f, U+99f3, U+99f9, U+9a3d, U+9a44, U+9a4e, U+9a8d, U+9afc, U+9b10-9b11, U+9b56, U+9b71, U+9b8b, U+9bb0, U+9bbe, U+9bcb, U+9bcf, U+9c37, U+9cbe, U+9cfe, U+9d10, U+9d27, U+9d3e, U+9d83, U+9dab, U+9db2, U+9ded, U+9e3c, U+9e50, U+9f07, U+9f1e, U+9f24, U+9f46, U+9f5b, U+9f7a, U+9f7d, U+9f91;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.42.woff2) format('woff2');
+ unicode-range: U+570a, U+5776, U+727f, U+76de, U+7705, U+7759, U+77b5, U+77df, U+7863, U+78c8, U+78da, U+78e9, U+78ed, U+78f3, U+78f9, U+7900, U+7931, U+797f, U+79ae, U+79f6, U+7a0c, U+7a43, U+7a6b, U+7a85, U+7a87, U+7abe, U+7af7, U+7b23, U+7b6d, U+7ba3, U+7bc3, U+7c03, U+7c2c, U+7c2f, U+7c3a, U+7c93, U+7cb4, U+7cb6, U+7ce6, U+7d0b, U+7d13, U+7d5e-7d5f, U+7d82, U+7df2, U+7df9-7dfa, U+7e29, U+7e37, U+7e3c, U+7e46, U+7e55, U+7e5a, U+7e73, U+7f37, U+7f4d, U+7fe3, U+805d, U+805f, U+808a, U+8099, U+809e, U+81a5, U+81b1, U+81b4, U+81de, U+81ff, U+824e, U+82b5, U+82c3, U+82f6, U+830d, U+83ed, U+8456, U+849f, U+8573, U+85e3, U+85eb, U+8648, U+8659, U+8692, U+8710, U+872a, U+8755, U+881c, U+8895, U+88cb, U+88d3, U+88e9, U+890c, U+890e, U+896b, U+8988, U+8993, U+89ed, U+8a05-8a06, U+8a0f, U+8a3d, U+8a5f, U+8a68, U+8a6d, U+8a75, U+8a95, U+8aa1, U+8b54, U+8b7b, U+8b88, U+8bc7, U+8c6d, U+8c8e, U+8c91, U+8cbf, U+8cc4, U+8d99, U+8dac, U+8db7, U+8df0-8df1, U+8e25, U+8e4c, U+8e79, U+8e98, U+8f16, U+8f47, U+8f4b, U+8f55, U+8f81, U+8fc6, U+8fd2, U+9015, U+9024, U+90d8, U+9183-9184, U+91bc, U+9230, U+9291, U+92cb, U+92eb, U+9332, U+9354, U+936e, U+9378, U+93c1, U+93e2, U+93e4, U+93ed, U+9404, U+9428, U+9444, U+9463, U+9477, U+947d, U+94f9, U+95da, U+9622, U+9624, U+9638, U+972b, U+978e, U+979d, U+97d7, U+981e, U+9837, U+9909, U+9964, U+99c3, U+99c9, U+9a1b, U+9a20, U+9a61, U+9aea, U+9b16, U+9b1a, U+9b3f, U+9b8c, U+9bc1, U+9bdb, U+9c24, U+9c7b, U+9ce0, U+9cf3, U+9d09, U+9d30, U+9d3c, U+9d42, U+9d9a, U+9da2, U+9db3, U+9dc7, U+9deb, U+9e56, U+9e85, U+9ec7, U+9ecb, U+9ee1, U+9f57, U+9f62-9f63;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.43.woff2) format('woff2');
+ unicode-range: U+5865, U+6f2d, U+76cc, U+76e8, U+76ec, U+76ff, U+770c, U+7782, U+78d1, U+7945, U+79a1, U+79ad, U+79f9, U+7a8e, U+7ba5, U+7c15, U+7c2b, U+7c9b, U+7cbb, U+7cf1, U+7e02, U+7e5e, U+7ee4, U+7f46, U+7f88, U+7fc6, U+7fd1, U+8075, U+8135, U+81c4, U+81d6, U+8322, U+833d, U+8358, U+838a, U+83a2, U+83b5, U+83d5, U+8435, U+84bb, U+84db, U+84f7-84f8, U+850a, U+8518, U+851e, U+8534, U+8558, U+857c, U+8594, U+85d6, U+85e2, U+85f6, U+8601, U+8691, U+86e2, U+87ef, U+8804, U+8808, U+880e, U+8823, U+8825, U+88db, U+896a, U+8999, U+89a5, U+8a11, U+8a23, U+8a52, U+8a70, U+8a78, U+8ab0, U+8acf, U+8adb, U+8aee, U+8af1, U+8b25, U+8b28, U+8b6b, U+8c8b, U+8c9b, U+8cab, U+8cb2, U+8cd3, U+8cde, U+8d01-8d02, U+8d09, U+8da4, U+8daf, U+8db6, U+8dd4, U+8e34, U+8e46, U+8ef7, U+8f1d, U+8f30, U+8f3f, U+8f42, U+9081, U+90bc, U+912e, U+91df-91e0, U+91e3, U+91f1, U+9209, U+9219, U+9234, U+923a, U+9242, U+9254, U+928a, U+9298, U+92a6, U+92c5, U+92e4, U+92ed, U+9303, U+9308, U+9323, U+9328, U+9364, U+938b, U+9394, U+93c6, U+93d0, U+93f1, U+93fb, U+9416, U+9427, U+9433, U+9440, U+9462, U+9471, U+947e, U+9491, U+9543, U+95ac, U+95be-95bf, U+965c-965d, U+96ba, U+9720, U+9724, U+9729, U+976e, U+978f, U+9796, U+97e8, U+97fc-97fd, U+9812, U+9824, U+983a, U+9854, U+985b, U+98f3, U+98f8, U+9906, U+991a, U+9928, U+9945, U+9948, U+995c, U+995f, U+99d0, U+99e1, U+99f7, U+9a01, U+9a2b, U+9a37, U+9a3c, U+9a62, U+9ad5, U+9af4, U+9b5c, U+9bc2, U+9bc5, U+9c2b, U+9c57, U+9c7d, U+9cac, U+9d13, U+9d3b, U+9d86, U+9d8a, U+9db8, U+9df3, U+9dff, U+9e01, U+9e34, U+9e9e, U+9eff, U+9f0a, U+9f0f, U+9f1c, U+9f2b, U+9f66;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.44.woff2) format('woff2');
+ unicode-range: U+51b1, U+57b2, U+5c1c, U+5ddb, U+75c3, U+76e0, U+76f3, U+76fd, U+7703, U+770f, U+772e, U+7745, U+774d, U+7755, U+7767, U+779c, U+7844, U+7894, U+78a0, U+78a6, U+78ad, U+78b8, U+78bd, U+78c3, U+78de, U+78f8, U+78fd, U+7909, U+7918, U+792e, U+793d, U+7958, U+797e, U+798c, U+79a4, U+79cc, U+79d9, U+79e2, U+7a27, U+7a2c, U+7a32, U+7a38, U+7a5c, U+7ad2, U+7b00, U+7b65, U+7b76, U+7bec-7bed, U+7c18, U+7c34, U+7c52, U+7c54, U+7c5c, U+7c5e, U+7c63, U+7c76, U+7cc2, U+7cc9, U+7d23, U+7d4d, U+7da1, U+7db6, U+7dc4, U+7dd7, U+7dfc, U+7e01, U+7e06, U+7e0b, U+7e1c, U+7e1e, U+7e40, U+7e43, U+7e64, U+7e67, U+7e6c, U+7e83, U+7e89, U+7e92, U+7e97, U+7f6f, U+7f80, U+7f95, U+7fb5, U+8007, U+8034, U+806b, U+808d, U+8117, U+8143, U+8163, U+8168, U+8175, U+8197, U+819f, U+81ef, U+8226, U+8241-8242, U+824a, U+831e, U+83c4, U+8468, U+847e, U+8484, U+8488, U+8495, U+8498, U+84a7, U+84ad, U+84c3, U+84c6, U+84f3, U+8531, U+8541, U+8582, U+85d1, U+85ef, U+8614, U+8618, U+8706, U+8791, U+87e8, U+87fc, U+882a, U+885f, U+8911, U+8920, U+8956, U+8987, U+8a10, U+8a14, U+8a56-8a57, U+8a6a, U+8a87, U+8ac8, U+8ad1, U+8b1f, U+8b8c, U+8b99, U+8c3d, U+8c57, U+8c77, U+8c97, U+8ca3, U+8cef, U+8d0b, U+8d72, U+8e28, U+8e89, U+8eb1, U+8f00, U+8f17, U+8f53, U+8f77, U+8fcb, U+9013, U+913a, U+9173, U+91b1, U+91d4, U+922a, U+929d, U+92d5, U+9373, U+939a, U+9410, U+9434, U+9475, U+96a9, U+96d1, U+9718, U+9784, U+97c6, U+98ba, U+98ee, U+98f0, U+9907, U+9950, U+99bb, U+99de, U+9a27, U+9afd, U+9b36, U+9b63, U+9bc0, U+9bf5-9bf6, U+9c27, U+9c30, U+9c42, U+9cc2, U+9ccb, U+9d1c, U+9d39, U+9d5f, U+9e52, U+9f2a, U+9f94;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.45.woff2) format('woff2');
+ unicode-range: U+578c, U+600a, U+76d3, U+7715, U+7723, U+774e, U+7758, U+7769, U+77a3, U+77c0, U+77c2, U+77f5, U+77fa, U+782a, U+7842, U+784a, U+7885, U+7892, U+78e3, U+78ea, U+7912, U+7964, U+7994, U+799e, U+79a9, U+79e0, U+7a11, U+7a44, U+7a50, U+7a59, U+7a5b, U+7a6f, U+7a71, U+7a75, U+7aaf, U+7ac2, U+7ae2, U+7b09, U+7b0d, U+7b69, U+7bdb, U+7bf3, U+7c11, U+7c20, U+7c83, U+7c96, U+7cd3, U+7cfa, U+7d2d, U+7d3e, U+7d6d, U+7d76, U+7d85, U+7dc5, U+7dcd, U+7e42, U+7e4b, U+7e63, U+7f47, U+7f59, U+7f65, U+7f7c, U+7f97, U+7f9c, U+7fed, U+8011, U+802e, U+8078, U+80b8, U+80f9, U+8123, U+816c, U+8184, U+8186, U+818b, U+81aa, U+81d5, U+8203, U+8252, U+826b, U+826d, U+8276, U+827c, U+833f, U+8362, U+8373, U+8382, U+841a, U+84d7, U+84f1, U+854b, U+855f, U+8583, U+8590, U+85a0, U+85fa, U+8613, U+862a, U+8675, U+86be, U+86d6, U+86dc, U+874d, U+8768, U+87c2, U+87dc, U+880f, U+8855, U+8858, U+889f, U+88ac, U+895b, U+8abe, U+8b45, U+8b4c, U+8b78, U+8b9c, U+8c3b, U+8c60, U+8cda, U+8d9d, U+8da1, U+8dfe, U+8e00, U+8e38, U+8e4e, U+8e61, U+8e73, U+8e9b, U+8ea9, U+8eb6, U+8ecf, U+8eec, U+8f35, U+8f57, U+8f65, U+8fa2, U+9037, U+9048, U+908c, U+911f, U+918e, U+91bb, U+91ed, U+9238, U+928c, U+92c2, U+92ce, U+9350, U+93b4, U+93b8, U+940d, U+9458, U+946e, U+9594, U+95cd, U+96cb, U+9723, U+9743, U+97cd, U+9833, U+98a9, U+98e6, U+9914, U+99cb, U+9a04, U+9a48, U+9aa9, U+9abb, U+9abe, U+9af2, U+9b19, U+9b3d, U+9b6b, U+9b73, U+9bc8, U+9be9, U+9bec, U+9c0c, U+9c6e, U+9c93, U+9d02, U+9d44, U+9d6c, U+9d8d, U+9da0, U+9dc1, U+9dd6, U+9e07, U+9e18, U+9e27, U+9e59, U+9e8f, U+9eb0, U+9eee, U+9f04-9f05, U+9f16, U+9f6f, U+9f93;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.46.woff2) format('woff2');
+ unicode-range: U+7640, U+76ea, U+7700, U+7732, U+774b, U+77c3, U+77d2, U+782b, U+785f, U+7880, U+78a9, U+78c4, U+7902, U+7907, U+790a, U+7959, U+7970, U+7973, U+7979, U+7990, U+79aa, U+79f3, U+79fc, U+7a04, U+7a07-7a08, U+7a18-7a19, U+7a62, U+7af8, U+7afe, U+7b10, U+7b1c, U+7b42, U+7b63, U+7b8f, U+7b92, U+7bdf, U+7bfa, U+7ca7, U+7ce7, U+7d02, U+7d10, U+7d33, U+7d3b, U+7d80, U+7db9, U+7dd0, U+7df1, U+7e08, U+7e56, U+7e6f, U+7e74, U+7e80, U+7f3e, U+7f89, U+7fad, U+7fb7, U+7fc8, U+800a, U+8021, U+8140, U+8142, U+81d7, U+81da, U+824d, U+8269, U+82c5, U+8381, U+83de, U+83f3, U+8408, U+844f, U+8481, U+8491, U+84d4-84d5, U+8519, U+853f, U+8563, U+8567, U+8586, U+8597, U+859d, U+85c0, U+860c, U+864b, U+86bf, U+872b, U+873d, U+8744, U+87a5, U+8805, U+881a, U+8878, U+88bd, U+88f6, U+88fa, U+8923, U+8938, U+89d3, U+8a45, U+8a47, U+8a50, U+8a5b, U+8abb, U+8abd, U+8ac2, U+8ae7, U+8b1a, U+8b21, U+8c67, U+8cae, U+8cc2, U+8ce1, U+8cf1, U+8d51, U+8d79, U+8d7d, U+8db9, U+8e03, U+8e5e, U+8e67, U+8ebb, U+8ebf, U+8f27, U+8f3b, U+8f3d, U+90df, U+910d, U+9111, U+917c, U+9181, U+9195, U+91a5, U+91e6, U+91ea, U+9215, U+9221, U+9235, U+9292, U+9299, U+92fa, U+9317, U+9325, U+9353, U+935f, U+938d, U+9398, U+93cd, U+93fd, U+93ff, U+940e, U+9424, U+9432, U+943f, U+944a, U+9527, U+958f, U+95a7, U+95db, U+969d, U+96a5-96a6, U+9744, U+9771, U+97aa, U+97ba, U+97bf, U+97df, U+9840, U+98b1, U+98c0, U+98e5, U+98ea, U+9912, U+9946, U+995d, U+99bf, U+9a07, U+9a66, U+9ac9, U+9acf, U+9b09, U+9b38, U+9b5b, U+9cf7, U+9d4b, U+9d4f, U+9d68, U+9d7c, U+9df5, U+9dfc, U+9e0d, U+9e13, U+9e16, U+9e60, U+9ef6, U+9f09, U+9f70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.47.woff2) format('woff2');
+ unicode-range: U+7b9b, U+7b9e, U+7ba4, U+7bb7, U+7bb9, U+7bbf, U+7bdc, U+7c1e, U+7c24, U+7c28, U+7c39, U+7c3d, U+7c6c, U+7c94, U+7cb8, U+7d07, U+7d1d, U+7d3a, U+7d46, U+7d73, U+7d84, U+7d8a, U+7d8f, U+7d92, U+7d94, U+7d97, U+7db4, U+7ddd-7dde, U+7de6, U+7df0, U+7df6, U+7e23, U+7e39, U+7e5c-7e5d, U+7e69, U+7e8f, U+7f43, U+7f5d, U+7f70, U+7fb4, U+7fe2, U+8061, U+8079, U+807b, U+807e, U+8115, U+811f, U+8133, U+813d, U+813f, U+81c8, U+8251, U+8259, U+8262, U+82bb, U+833b, U+834a, U+83d0, U+83d3, U+83d9-83da, U+83e3, U+83e6, U+83e8, U+8454, U+8460, U+846e, U+8472, U+84d9, U+8501, U+855b-855c, U+8566, U+8575, U+8577, U+8596, U+85e8, U+85ee, U+85f0, U+85f3, U+85f5, U+8643, U+8658, U+865c-865d, U+86e5, U+86f6, U+8720, U+8778, U+8790, U+8796, U+87a1-87a2, U+87f3, U+880c-880d, U+8812, U+8817, U+881d, U+881f, U+8898, U+891c, U+8928, U+897e, U+898a, U+899a-899b, U+899f-89a0, U+89af, U+8a1c, U+8a21, U+8a2e, U+8a3c, U+8a77, U+8a7a, U+8ac9, U+8ad2, U+8ad8, U+8ae6, U+8afa, U+8b00, U+8b20, U+8b29, U+8b38, U+8b3d, U+8b8d, U+8b9b, U+8ca6, U+8cb8, U+8cbd, U+8cc5, U+8cca, U+8cf3, U+8cfa, U+8d00, U+8d04, U+8d0a, U+8d0c, U+8daa, U+8dc1, U+8dc8, U+8dd2, U+8e56, U+8ec0, U+8ec7, U+8ed4, U+8ed8, U+8ee3, U+8efb, U+8f12, U+8f25-8f26, U+8f5f, U+9007, U+9094, U+90a5, U+90ab, U+913d, U+9186, U+919e, U+91bd, U+91e5, U+9202, U+923d, U+924d, U+925b, U+9293, U+929c, U+92c7, U+92d2, U+92f0, U+92f7, U+9320, U+9326, U+93b2, U+93c8, U+93df, U+9411, U+942c, U+9472, U+9474, U+947f, U+957b, U+9591, U+95b0, U+95b3-95b4, U+95b9, U+95cc, U+95e1, U+966e, U+967b, U+9702, U+9775, U+978a, U+979b, U+97d3;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.48.woff2) format('woff2');
+ unicode-range: U+5c8d, U+72e8, U+771e, U+7749, U+7774, U+778f, U+77a1, U+780f, U+7824, U+78b5, U+78ef, U+7910-7911, U+7976, U+7996-7997, U+79b0, U+79b5, U+79c5, U+7a21, U+7a34, U+7a7d, U+7aa4, U+7ac8, U+7acc, U+7ae4, U+7b32, U+7b3f, U+7c59, U+7cb5, U+7cbf, U+7d18, U+7d52-7d53, U+7dcb, U+7e2a, U+7e8d, U+7ed7, U+7fa0, U+7fd6, U+7ff8, U+8076, U+80a7, U+81f6, U+820b, U+8263, U+82bc, U+836e, U+8422, U+844b, U+84e7, U+8504, U+8552, U+85ad, U+8672, U+86a1, U+8738, U+87a6, U+8829, U+89b5, U+8a39, U+8a3b, U+8a40, U+8a44, U+8aac, U+8ae0, U+8b57, U+8c4a, U+8cc1, U+8d8c, U+8db0, U+8e04, U+8ea6, U+8ee7, U+8f02, U+8f10, U+8f18, U+8f28, U+9076, U+908f, U+9206, U+9216, U+927c, U+9285, U+92ea, U+930b, U+9365, U+9387, U+939d, U+9429, U+9437, U+9470, U+95bd, U+95df, U+96a3, U+96b2, U+96d8, U+971d, U+979f, U+97bb, U+97ee, U+97f4, U+97f7, U+980a-980b, U+9813, U+981c, U+9855, U+9868, U+9874, U+98b5, U+98f7, U+98fa, U+98fe, U+9900, U+990c, U+9913, U+993c, U+994c, U+9952, U+9961, U+9973, U+997b, U+99b4, U+99dc, U+99e3, U+99e5, U+99e8, U+99f6, U+9a0d, U+9a23, U+9a30, U+9a3f, U+9a41-9a42, U+9a47, U+9a51, U+9a55-9a56, U+9a5b, U+9a65, U+9abf, U+9ade, U+9ae7, U+9b00, U+9b04-9b05, U+9b22, U+9b27, U+9b70, U+9b75, U+9b78, U+9b7a, U+9bca, U+9bd0, U+9bd3, U+9bd6-9bd8, U+9bfd, U+9c1e, U+9c2c, U+9c35, U+9c38, U+9c3b, U+9c4c, U+9c7a, U+9ce9-9cea, U+9cf6, U+9cff, U+9d22, U+9d2d, U+9d33-9d35, U+9d3a, U+9d3d, U+9d41, U+9d5d, U+9d88, U+9d90, U+9d93, U+9da9, U+9db4, U+9dd8, U+9de9, U+9df4, U+9dfd, U+9ea9, U+9eb5, U+9efa, U+9f11, U+9f18, U+9f25, U+9f2e, U+9f72, U+9f7c, U+9f8e, U+9f9d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 800;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/800/b2ba6ea127be073a7a0332472a84d647.49.woff2) format('woff2');
+ unicode-range: U+76c9, U+76e2, U+7718, U+7771, U+777b, U+779e, U+78e0, U+7924, U+793f, U+7969, U+79a8, U+79fa, U+7a5f, U+7aab, U+7b0e, U+7b8b, U+7be8, U+7c4b, U+7cee, U+7d63, U+7de4, U+7df5, U+7e00, U+7e1a-7e1b, U+7e27, U+7e7f, U+7f99, U+7fae, U+80b0, U+8278, U+8359, U+8395, U+8399, U+8447, U+845f, U+84aa, U+8602, U+873c, U+8751, U+87a0, U+87a7, U+87c5, U+87e2, U+87e7, U+894c, U+8958, U+897d, U+8a1e, U+8b04, U+8c3c, U+8c70, U+8c92, U+8cf7, U+8e92, U+8ead, U+8fcd, U+91ff, U+927d, U+92ab, U+92b2, U+9327, U+935a, U+9371, U+93f8, U+946a, U+95a2, U+9777, U+9826, U+98bb, U+991f, U+992b, U+993d, U+9a0a, U+9a46, U+9a94, U+9aa3, U+9b33, U+9b52, U+9b7d, U+9b7f, U+9b85, U+9b87, U+9b8e, U+9b98, U+9baa, U+9bad, U+9be8, U+9c3f-9c40, U+9c44, U+9c53, U+9c96, U+9d12, U+9d19, U+9d1e, U+9d63, U+9d6a, U+9de6, U+9dfa, U+9f5c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.0.woff2) format('woff2');
+ unicode-range: U+4e00, U+4e09-4e0b, U+4e0d-4e0e, U+4e16, U+4e1a, U+4e1c, U+4e24, U+4e2a, U+4e2d, U+4e3a-4e3b, U+4e48, U+4e4b, U+4e5f, U+4e86, U+4e8b-4e8c, U+4e8e, U+4e9b, U+4ea7, U+4eba, U+4ec0, U+4ece, U+4ed6, U+4ee3, U+4ee5, U+4eec, U+4efb, U+4f1a, U+4f46, U+4f4d, U+4f53, U+4f5c, U+4f60, U+4f7f, U+4fe1, U+513f, U+5148, U+5168, U+516c, U+5173, U+5176, U+5185, U+519b, U+51fa, U+5206, U+5229, U+5230, U+5236, U+524d, U+529b, U+52a0, U+52a8, U+5316, U+5341, U+539f, U+53bb, U+53c8, U+53ca, U+53d1, U+53ea, U+53ef, U+5408, U+540c, U+540e, U+5411, U+5458, U+548c, U+56de, U+56e0, U+56fd, U+5728, U+5730, U+58f0, U+5916, U+591a, U+5927, U+5929, U+5934, U+5979, U+597d, U+5982, U+5b50, U+5b66, U+5b83, U+5b9a, U+5b9e, U+5bb6, U+5bf9, U+5c06, U+5c0f, U+5c31, U+5de5, U+5df1-5df2, U+5e38, U+5e74, U+5e76, U+5e94, U+5ea6, U+5f00, U+5f53, U+5f88, U+5f97, U+5fc3, U+6027, U+60c5, U+60f3, U+610f, U+6210-6211, U+6216, U+6218, U+6240, U+624b, U+628a, U+63d0, U+653f, U+6559, U+6587, U+65af-65b0, U+65b9, U+65e0, U+65e5, U+65f6, U+660e, U+662f, U+6700, U+6708-6709, U+672c, U+673a, U+6765, U+679c, U+6837, U+6b21, U+6b63-6b64, U+6bd4, U+6c11, U+6ca1, U+6cd5, U+6d77, U+70b9, U+7136, U+7269, U+7279, U+73b0, U+7406, U+751f, U+7528, U+7531, U+7684, U+76f8, U+770b, U+7740, U+77e5, U+79cd, U+7acb, U+7b2c, U+7b49, U+7ecf, U+7ed9, U+7f8e, U+8001, U+8005, U+800c, U+80fd, U+81ea, U+884c, U+8868, U+88ab, U+897f, U+8981, U+89c1, U+8bdd, U+8bf4, U+8d77, U+8eab, U+8fc7, U+8fd8-8fd9, U+8fdb, U+901a, U+9053, U+90a3, U+90e8, U+90fd, U+91cc-91cd, U+957f, U+95e8, U+95ee, U+95f4, U+9762, U+9ad8;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.1.woff2) format('woff2');
+ unicode-range: U+4e07, U+4e14, U+4e49, U+4e66, U+4e89, U+4e94, U+4ea4, U+4eb2, U+4eca, U+4ee4, U+4ef6, U+4f20, U+4f4f, U+4f55, U+4fbf, U+4fdd, U+5019, U+505a, U+50cf, U+5143, U+5149, U+514b, U+5165, U+5171, U+5175, U+5177, U+518d, U+51b3, U+51c6, U+51e0, U+51fb, U+5207, U+5219, U+522b, U+529e, U+52a1, U+5317, U+533a, U+5355, U+5357, U+5373-5374, U+53cd, U+53d6-53d8, U+53e3, U+53eb, U+53f0, U+53f8, U+5404, U+540d, U+542c, U+544a, U+5462, U+547d, U+54c1, U+56db, U+573a, U+57fa, U+58eb, U+5904, U+5907, U+592a-592b, U+5931, U+5973, U+59cb, U+5b57-5b58, U+5b89, U+5b8c, U+5bfc, U+5c11, U+5c14, U+5c55, U+5c71, U+5e02-5e03, U+5e08, U+5e26, U+5e72-5e73, U+5efa, U+5f0f, U+5f20, U+5f3a, U+5f62, U+5f71, U+5f80, U+5fb7, U+5fc5, U+5feb, U+600e, U+601d, U+603b, U+611f, U+624d, U+6253, U+62a5, U+62c9, U+6301, U+6307, U+636e, U+63a5, U+6536, U+6539, U+653e, U+6570, U+66f4, U+670d, U+671b, U+671f, U+672a, U+672f, U+6743, U+6761, U+6781, U+6797, U+6839, U+683c, U+6b65, U+6b7b, U+6bcf, U+6c14, U+6c34, U+6c42, U+6cbb, U+6d3b, U+6d41, U+6d4e, U+6e05, U+7231, U+738b, U+7535, U+754c, U+767d, U+76ee, U+76f4, U+771f, U+773c, U+786e, U+793e, U+795e, U+79d1, U+7a0b, U+7a7a, U+7b11, U+7ba1, U+7c7b, U+7cfb, U+7ec4, U+7ed3, U+7edf, U+7f57, U+8054, U+81f3, U+8272, U+82f1, U+89c2, U+89c4, U+89c9, U+89e3, U+8a00, U+8ba1, U+8ba4, U+8ba9, U+8bae, U+8bb0, U+8bb8, U+8bba, U+8bbe, U+8bc1, U+8bc6, U+8be5, U+8c03, U+8c61, U+8d44, U+8d70, U+8def, U+8f66, U+8f6c, U+8fb9, U+8fbe, U+8fd0-8fd1, U+8fdc, U+8fde, U+9020, U+91cf, U+91d1, U+961f, U+9662, U+96be, U+975e, U+9886, U+9898, U+98ce, U+98de, U+9a6c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.2.woff2) format('woff2');
+ unicode-range: U+4e03, U+4e13, U+4e25, U+4e3e, U+4e4e, U+4e5d, U+4e9a, U+4eac, U+4ec5, U+4ef7, U+4f01, U+4f17, U+4f3c, U+4f4e, U+4f8b, U+4f9b, U+4f9d, U+503c, U+515a, U+516b, U+516d, U+5174, U+5199, U+519c, U+51b5, U+5212, U+5217, U+529f, U+52bf, U+5305, U+533b, U+5343, U+534a, U+534e, U+5386, U+53c2, U+53cb-53cc, U+53e4, U+53e6, U+53f2, U+53f7, U+5403, U+5417, U+5427, U+5468, U+54cd, U+5546, U+5668, U+56e2, U+56f4, U+56fe, U+571f, U+578b, U+57ce, U+5883, U+589e, U+590d, U+591f, U+5947, U+59d4, U+5b69, U+5b98, U+5ba2, U+5bb3, U+5bb9, U+5bc6, U+5bdf, U+5c3d, U+5c40, U+5df4, U+5e0c, U+5e7f, U+5e95, U+5e9c, U+5f15, U+5f8b, U+5fd7, U+5ff5, U+6001, U+606f, U+613f, U+623f, U+6279, U+627e, U+6280, U+6295, U+62a4, U+6309, U+63a8, U+652f, U+653b, U+6545, U+6548, U+654c, U+6574, U+6597, U+6599, U+65ad, U+65bd, U+65cf, U+65e9, U+6613, U+661f, U+663e, U+66fe, U+671d, U+6740, U+674e, U+6784, U+67d0, U+67e5, U+6807, U+6848, U+6b62, U+6b66, U+6bb5, U+6bcd, U+6c5f, U+6cb3, U+6ce8, U+6d3e, U+6d88, U+6df1, U+6ee1, U+706b, U+7167, U+7236, U+7247, U+7559, U+75c5, U+767e, U+77f3, U+7814, U+793a, U+79bb, U+79f0, U+7a76, U+7a81, U+7ad9, U+7ae0, U+7b54, U+7b97, U+7c73, U+7cbe, U+7d27, U+7ea2, U+7ea6-7ea7, U+7eaa, U+7ebf, U+7ec6-7ec8, U+7edd, U+7eed, U+7ef4, U+7fa4, U+8003, U+81f4, U+8282, U+82b1, U+82cf, U+8425, U+843d, U+867d, U+88c5, U+89c6, U+8bb2, U+8bc9, U+8bed, U+8bf7, U+8c08, U+8d23, U+8d28, U+8d39, U+8d8a, U+8db3, U+8ddf, U+8f7b, U+8f83, U+9009, U+91c7, U+9632, U+963f, U+9645, U+9648, U+9664, U+968f, U+96c6, U+9700, U+9752, U+9769, U+97f3, U+9879, U+987b, U+9996, U+9a8c, U+9ec4, U+9ed1;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.3.woff2) format('woff2');
+ unicode-range: U+4e45, U+4e50, U+4e60, U+4e70-4e71, U+4e91, U+4ecd, U+4efd, U+4f0a, U+4f18, U+4f24, U+4f59, U+4f5b, U+4fee, U+5012, U+5047, U+505c, U+5145, U+514d, U+5170, U+517b, U+51b2, U+51b7, U+5218, U+521a-521b, U+521d, U+5224, U+523b, U+526f, U+52a9, U+52b3, U+534f, U+5360-5361, U+536b, U+5370, U+538b, U+53e5, U+53f3, U+5426, U+54c8, U+54ea, U+554a, U+5584, U+559c, U+5750, U+5757, U+575a, U+591c, U+592e, U+5988, U+5a01, U+5b88, U+5b97, U+5ba1, U+5ba3-5ba4, U+5bcc, U+5c04, U+5c3c, U+5c42, U+5c45, U+5c5e, U+5c81, U+5c9b, U+5dde, U+5de6, U+5dee, U+5e1d, U+5e2e, U+5f02, U+5f39, U+5f81, U+5f85, U+5fae, U+6000, U+6015, U+6025, U+602a, U+6076, U+60a8, U+60ca, U+6258, U+6267, U+627f, U+6297, U+62c5, U+62ff, U+6325, U+6392, U+63a7, U+6562, U+65e2, U+665a, U+666e, U+6728, U+6751, U+6811, U+6821, U+68c0, U+6982, U+6a21, U+6b22, U+6bdb, U+6c49, U+6c89, U+6ce2, U+6d32, U+6e38, U+6e90, U+6f14, U+6fc0, U+7075, U+70ed, U+72af, U+72b6, U+72ec, U+7387, U+73af, U+7403, U+751a, U+7530, U+7537, U+7565, U+7591, U+75db, U+7687, U+76ae, U+76ca, U+7701, U+7834, U+798f, U+79ef, U+7a0e, U+7a7f, U+7adf, U+7b56, U+7b80, U+7d20, U+7eb3, U+7ee7, U+7f51, U+7f6a, U+7f6e, U+804c, U+80a1, U+80b2, U+80cc, U+80dc, U+8111, U+811a, U+8138, U+822a, U+822c, U+8239, U+827a, U+82e5-82e6, U+8303, U+8349, U+836f, U+83b7, U+8457, U+8840, U+8863, U+89d2, U+8b66, U+8bd5, U+8bfb, U+8c01, U+8d1f, U+8d22, U+8d85, U+8ff0, U+8ffd, U+9000-9002, U+901f, U+914d, U+9152, U+94b1, U+94c1, U+94f6, U+9519, U+9633, U+9635-9636, U+9646, U+964d, U+9650, U+9669, U+96f7, U+9759, U+987f, U+9884, U+98df, U+9999, U+9f99;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.4.woff2) format('woff2');
+ unicode-range: U+4e34, U+4e3d, U+4e61, U+4e88, U+4e92, U+4ea1, U+4ea6, U+4eae, U+4ecb, U+4ed8, U+4f26, U+4f2f, U+4fc4, U+501f, U+5065, U+51cf, U+5251, U+5267, U+52d2, U+5347, U+5356, U+535a, U+5371, U+5382, U+53bf, U+53f6, U+5409, U+541b, U+542b, U+5438, U+5440, U+5473, U+547c, U+54e5, U+5510, U+559d, U+56ed, U+56f0, U+56fa, U+5723, U+5747, U+574f, U+57df, U+5802, U+5965, U+5987, U+59d0-59d1, U+5a18, U+5a5a, U+5b59, U+5b8b, U+5b9d, U+5bab, U+5bfb, U+5c01, U+5c1a, U+5c4b, U+5cb8, U+5de8, U+5e2d, U+5e78, U+5e8f, U+5ea7, U+5ead, U+5eb7, U+5f1f, U+5f52, U+5f55, U+5fd9, U+5ffd, U+6050, U+6069, U+6162, U+6237, U+6293, U+62db, U+62e9, U+62ec, U+635f, U+6362, U+6388-6389, U+638c, U+63a2, U+6447, U+6551, U+6563, U+65c1, U+65c5, U+65e7, U+6625, U+666f, U+667a, U+6697, U+670b, U+6742, U+6750, U+675f, U+677e-677f, U+67aa, U+67b6, U+6838, U+68a6, U+695a, U+697c, U+6b27, U+6b3e, U+6bd2, U+6beb, U+6c38, U+6c99, U+6cb9, U+6cfd, U+6d0b, U+6d1b, U+6d4b, U+6e10, U+6e29, U+6e2f, U+6e56, U+6e7e, U+706d, U+70ae, U+70b8, U+70c8, U+70df, U+7248, U+7259, U+73ed, U+753b, U+7597, U+767b, U+76d1, U+775b, U+7761, U+7763, U+77ed, U+793c, U+7968, U+7981, U+79d8, U+79fb, U+7aef, U+7b14, U+7d22, U+7f16, U+7f3a, U+8033, U+80af, U+80e1, U+8131, U+8230, U+826f, U+8363, U+83ab, U+85cf, U+8651, U+8865, U+8ba8, U+8bc4, U+8bcd, U+8bd7, U+8bef, U+8bfa, U+8c0b, U+8c13, U+8c22, U+8d25, U+8d27, U+8d35, U+8d76, U+8dd1, U+8df3, U+8f7d, U+8f93, U+9003, U+9010, U+9047, U+9057, U+907f, U+91ca, U+91ce, U+949f, U+9500, U+95fb, U+9634, U+9644, U+96e8, U+9732, U+9760, U+9876, U+987a, U+987e, U+989d, U+996d, U+9c7c, U+9c81, U+9c9c;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.5.woff2) format('woff2');
+ unicode-range: U+4e01, U+4e1d, U+4e30, U+4e43, U+4ebf, U+4f11, U+4f19, U+4f1f, U+4f38, U+4fb5, U+4fc3, U+5144, U+5178, U+51b0, U+51e1, U+5200, U+5211, U+523a, U+52aa, U+5348, U+5377, U+5434, U+54f2, U+552e-552f, U+5566, U+558a, U+5634, U+5706, U+5766, U+57c3, U+57f9, U+5854, U+585e, U+590f, U+593a, U+5957, U+59b9, U+59bb, U+59c6, U+59d3, U+5b81, U+5b87, U+5bbd, U+5c0a, U+5c24, U+5ddd, U+5e01, U+5e84, U+5e8a, U+5e93, U+5e97, U+5ef6, U+5f03-5f04, U+5f31, U+5f69, U+5f92, U+5fcd, U+5fd8, U+6012, U+60b2, U+620f, U+6269, U+626c, U+6298, U+62b1, U+62b5, U+62bd, U+62cd, U+62e5, U+632f, U+63aa, U+63e1, U+63f4, U+641e, U+6446, U+6469, U+64cd, U+66b4, U+66f2, U+66ff, U+672b, U+6731, U+6768, U+6770, U+6790, U+67d3, U+684c, U+6885, U+68ee, U+690d, U+6b32, U+6b4c, U+6b8a-6b8b, U+6bc1, U+6bd5, U+6c47, U+6c7d, U+6cbf, U+6d1e, U+6d6a, U+6df7, U+6f5c, U+706f, U+719f, U+7237-7238, U+725b, U+72c2, U+731b, U+732e, U+7389, U+73a9, U+74e6, U+7532-7533, U+76d6, U+76d8, U+76db, U+76df, U+7840, U+786c, U+7956, U+79c0-79c1, U+79cb, U+7a33, U+7a97, U+7ade, U+7b51, U+7bc7, U+7eaf, U+7eb7-7eb8, U+7ec3, U+7edc, U+7eff, U+7f13, U+7ffb, U+8036, U+8089, U+81e3, U+821e, U+83b1, U+8428, U+848b, U+8499, U+84dd, U+864e, U+865a, U+8857, U+8ba2, U+8bad, U+8bbf, U+8bd1, U+8bda, U+8bf8, U+8c37, U+8d1d, U+8d2d, U+8d38, U+8d5b, U+8d5e, U+8d75, U+8da3, U+8f6e-8f6f, U+8fc5, U+8fce, U+8fdd, U+8feb, U+8ff7, U+8ff9, U+900f, U+9014, U+904d, U+906d, U+90d1, U+9192, U+9488, U+9547, U+95ea, U+963b, U+9690, U+96c4-96c5, U+96ea, U+9707, U+9875, U+9986, U+9aa8, U+9b3c, U+9b54, U+9ea6, U+9ebb, U+9ed8, U+9f13, U+9f50;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.6.woff2) format('woff2');
+ unicode-range: U+4e08, U+4e39, U+4e4c, U+4e4f, U+4e58, U+4eab, U+4ec1, U+4ed9, U+4eea, U+4ef0, U+4eff, U+4f0f, U+4f30, U+4f34, U+4fa0, U+4fa7, U+4fd7, U+500d, U+503a, U+503e, U+504f, U+5076-5077, U+507f, U+5192, U+51ac, U+51c0, U+51f6, U+520a, U+52b2, U+52c7, U+5385, U+5389, U+539a, U+53ec, U+53f9, U+542f, U+5439, U+5446, U+54b1, U+54ed, U+5531, U+5708, U+5806, U+5899, U+58c1, U+5949, U+594b, U+5954, U+5956, U+5976, U+5999, U+5a46, U+5b54, U+5b63-5b64, U+5b9c, U+5bd2, U+5c16, U+5c3e, U+5de7, U+5e55, U+5e86, U+5e9f, U+5f17, U+5f79, U+5f7b-5f7c, U+5f84, U+5f90, U+5fa1, U+5fc6, U+5fe0, U+6062, U+6068, U+6070, U+60a3, U+60ef, U+6108, U+61c2, U+6234, U+62ac, U+62d2, U+62dc, U+6302, U+6311, U+6355, U+63cf, U+6478, U+64a4, U+64ad, U+656c, U+65cb, U+65e6, U+6620, U+6653, U+6668, U+6682, U+66fc, U+6717, U+675c, U+676f, U+6865, U+6a2a, U+6cdb, U+6cea, U+6cf0, U+6d17, U+6d25, U+6d2a, U+6d89, U+6da6, U+6de1, U+6f6e, U+7070, U+707e, U+708e, U+70e6-70e7, U+7206, U+724c, U+72b9, U+72d7, U+739b, U+73cd, U+73e0, U+745e, U+75be, U+75c7, U+76fe, U+77ff, U+7801, U+78b0, U+79df, U+79e6, U+7a0d, U+7a77, U+7ae5, U+7b26, U+7b7e, U+7cae, U+7cca, U+7d2f, U+7e41, U+7eb5, U+7ecd, U+7f18, U+7f29, U+7f5a, U+7f62, U+7f72, U+7f8a, U+7ffc, U+805a, U+80c6, U+80de, U+80f8, U+817f, U+820d, U+8247, U+827e, U+8336, U+8352, U+83dc, U+866b, U+86cb, U+878d, U+8861, U+888b, U+88ad, U+88c1-88c2, U+89e6, U+8baf, U+8bfe, U+8d2b, U+8d56, U+8d6b, U+8ddd, U+8f70, U+8f86, U+8f91, U+8fa9, U+8fdf, U+90a6, U+955c, U+95ed, U+95f9, U+9677, U+9686, U+9694, U+969c, U+96f6, U+97e9, U+9a7b, U+9a91, U+9b42, U+9e1f, U+9e21, U+9f3b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.7.woff2) format('woff2');
+ unicode-range: U+4e27, U+4e54, U+4e95, U+4ec7, U+4ed4, U+4f0d, U+4f2a, U+4f69, U+4f73, U+4fa6, U+4fe9, U+50a8, U+5141, U+517c, U+518c, U+51c9, U+51e4, U+51ed, U+51ef, U+5238, U+5242, U+5269, U+529d, U+52b1, U+52c3, U+52e4, U+53d4, U+5413, U+5448, U+5761, U+5782, U+5821, U+58a8, U+58ee, U+594f, U+5974, U+5a1c, U+5a92, U+5b5f, U+5b99, U+5baa, U+5bbe, U+5c38, U+5c3a, U+5c4a, U+5ca9, U+5cf0, U+5d07, U+5de1, U+5e15, U+5e45, U+5e7b-5e7c, U+5f6d, U+5fe7, U+601c, U+604b, U+6084, U+6089, U+60d1, U+60dc, U+60e0, U+60e8, U+6124, U+6148, U+6167, U+6212, U+622a, U+624e, U+6251, U+626b, U+6270, U+62a2, U+62d4, U+62d6, U+62df, U+633a, U+63a9, U+63d2, U+641c, U+6444, U+6492, U+649e, U+654f, U+65d7, U+660f, U+6628, U+66f9, U+6735, U+679d, U+67cf, U+67d4, U+67f3, U+6851, U+6881, U+6b23, U+6b96, U+6bbf, U+6c0f, U+6c57, U+6c61, U+6ce5, U+6d01, U+6d53, U+6d6e, U+6db2, U+6e21, U+6ed1, U+6eda, U+6f02, U+6f2b, U+7126, U+71c3, U+722c, U+7267, U+7272, U+72f1, U+731c, U+7518, U+756a, U+75af, U+7686, U+7709, U+77a7, U+77db, U+788d-788e, U+78e8, U+7a3f, U+7af9, U+7bad, U+7bb1, U+7c4d, U+7c89, U+7c97, U+7ed5, U+7ee9-7eea, U+7efc, U+8010, U+8083, U+80a9, U+80c1, U+8109, U+814a, U+8150, U+8170, U+8179, U+8212, U+8258, U+82b3, U+8361, U+8377, U+83f2, U+8482, U+8584, U+8bca, U+8be6, U+8c6a, U+8c8c, U+8d21, U+8d2f, U+8d34, U+8d4f, U+8d8b, U+8dc3, U+8dcc, U+8df5, U+8e2a, U+8f88, U+8f9b, U+8f9e, U+8fd4, U+8fea, U+9012, U+903b-903c, U+9075, U+90aa, U+90ce, U+9178, U+9501, U+952e, U+95f2, U+9605, U+970d, U+9887, U+9891, U+9897, U+989c, U+98d8, U+9910, U+996e, U+9a71, U+9a76, U+9a7e, U+9a82, U+9a97, U+9ece, U+9f84;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.8.woff2) format('woff2');
+ unicode-range: U+4e1b, U+4e22, U+4e8f, U+4ed7, U+4ef2, U+4faf, U+5179, U+517d, U+51a0, U+51af, U+51cc, U+51dd, U+524a, U+5272, U+5306, U+5362, U+538c, U+53d9, U+53db, U+5410, U+5415, U+541e, U+5428, U+543e, U+54ac, U+54c0, U+55b7, U+561b, U+57cb, U+5939, U+5948, U+5b8f, U+5bbf, U+5bc2, U+5bc4, U+5bff, U+5c18, U+5c1d, U+5c48, U+5c82, U+5c97, U+5ce1, U+5e10, U+5e3d, U+5e7d, U+5ef7, U+5f25, U+5f2f, U+5faa, U+6016, U+6028, U+6052, U+606d, U+607c, U+609f, U+60e7, U+614c, U+614e, U+6170, U+6208, U+6241, U+6263, U+6276, U+6291, U+6296, U+629a-629b, U+62bc, U+62f3, U+6324, U+6377, U+63ed, U+642c, U+64e6, U+6566, U+6572, U+659c, U+65e8, U+6606, U+660c, U+6643, U+664b, U+6676, U+6696, U+66f0, U+67f1, U+6863, U+68af-68b0, U+6905, U+6b3a, U+6c60, U+6c64, U+6c88, U+6c9f, U+6cc9, U+6d45, U+6d82, U+6d8c, U+6e14, U+6e7f, U+6f20, U+6fb3, U+70bc, U+70c2, U+7164, U+718a, U+71d5, U+7262, U+7275, U+72e0, U+72fc, U+730e, U+732a-732b, U+7384, U+73bb, U+7434, U+745f, U+74f6, U+75ab, U+75b2, U+75bc, U+764c, U+76d7, U+78c1, U+795d, U+7965, U+796d, U+79e9, U+7a00, U+7a46, U+7b79, U+7c92, U+7cb9, U+7cd6, U+7d2b, U+7ea0, U+7eb9, U+7ebd, U+8017, U+806a, U+809a, U+809d, U+80a4-80a5, U+80bf, U+810f, U+817e, U+81c2, U+8270, U+82cd, U+83cc, U+8463, U+86c7, U+8870, U+8881, U+8896, U+8a89, U+8be2, U+8bf1, U+8c46, U+8d37, U+8d3a, U+8d4b, U+8d54, U+8d64, U+8de8, U+8e0f, U+8eb2, U+8eba, U+8f89, U+8f96, U+8fc1, U+8fc8, U+900a, U+9063, U+9065, U+9093, U+90ae, U+90bb, U+9189, U+9274, U+94a2, U+94bb, U+94dc, U+94fa, U+950b, U+9601, U+9614, U+966a, U+9676, U+96fe, U+978b, U+97e6, U+9970, U+9b4f, U+9e23, U+9f20, U+9f7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.9.woff2) format('woff2');
+ unicode-range: U+4e11, U+4e18, U+4e32, U+4e59, U+4e73, U+4e7e, U+4ec6, U+4ed3, U+4f10, U+4f8d, U+4fca, U+4ff1, U+5085, U+50b2, U+50bb, U+51fd, U+5237, U+5265, U+52a3, U+52ab, U+5339, U+5353, U+535c, U+5367, U+543b, U+5475, U+54e6, U+54e9, U+54fc, U+5507, U+5524, U+5582, U+5598, U+5609, U+5740, U+575b, U+582a, U+586b, U+5893, U+58f3, U+5938, U+5951, U+5978, U+5996, U+59a5, U+59a8, U+59ff, U+5a03, U+5acc, U+5b85, U+5bf8, U+5bfa, U+5c3f, U+5c4f, U+5c65, U+5cb3, U+5e05, U+5e99, U+5e9e, U+5ec9, U+5fcc, U+6094, U+60a6, U+60ac, U+60df, U+60e9, U+6109, U+611a, U+6155, U+6247, U+6254, U+626d-626e, U+62e6, U+62e8, U+62fc, U+62fe, U+6316, U+6321, U+6323, U+6349, U+63a0, U+642d, U+643a, U+65a4-65a5, U+6602, U+6674, U+679a, U+67dc, U+67ef, U+67f4, U+6842-6843, U+68c9, U+6b20, U+6b47, U+6b7c, U+6bc5, U+6c27, U+6c6a, U+6c83, U+6ce1, U+6d51, U+6d69, U+6da8, U+6dfb, U+6e34, U+6e83, U+6e9c, U+6ecb, U+6ef4, U+7089, U+7235, U+727a, U+73b2, U+7483, U+74dc, U+758f, U+75d5, U+7626, U+76b1, U+76d0, U+76ef, U+7720, U+7741, U+7897, U+7978, U+7a74, U+7a9d, U+7aed, U+7b3c, U+7cdf, U+7eb2, U+7ed8, U+7ef3, U+7f1d, U+7f34, U+7f69, U+7fbd, U+7ff0, U+8000, U+8015, U+804a, U+808c, U+80a0, U+80c3, U+80ce, U+80d6, U+8106, U+8154, U+8180, U+819c, U+820c, U+8231, U+82ac, U+82d7, U+8328, U+832b, U+8389, U+83b2, U+8427, U+845b, U+84c4, U+859b, U+8702, U+8986, U+89c8, U+8bbc, U+8bde, U+8c28, U+8c6b, U+8d24, U+8d2a, U+8d62, U+8d74, U+8f68, U+8fa8, U+8fb1, U+9006, U+9080, U+90c1, U+90ed, U+9177, U+94c3, U+9510, U+9526, U+95f7, U+9675, U+96b6, U+96c7, U+96d5, U+9738, U+98a4, U+9971-9972, U+997f, U+9e3f, U+9e4f, U+9e70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.10.woff2) format('woff2');
+ unicode-range: U+4ea8, U+4ead, U+4ed1, U+4f50, U+4fd8, U+5018, U+5021, U+50ac, U+50e7, U+5112, U+5188, U+51bb, U+51d1, U+52c9, U+52fe, U+5320, U+5351, U+5375, U+537f, U+53a8, U+5401, U+540a, U+541f, U+5435, U+543c, U+5490, U+54bd, U+5509, U+5565, U+5589, U+55ef, U+5631, U+56ca, U+5733, U+5851, U+5915, U+5984, U+59ae, U+59fb, U+5a07, U+5a74, U+5ac1-5ac2, U+5b55, U+5b5d, U+5bb0, U+5bb4, U+5bd3, U+5c09, U+5c60, U+5d29, U+5deb, U+5eb8, U+5eca, U+5f8c, U+6014, U+60a0, U+6101, U+626f, U+62ab, U+62b9, U+62c6, U+62d8, U+6328, U+644a, U+6458, U+6467, U+6491, U+6591, U+65bc, U+65fa, U+662d, U+6734, U+6746, U+67af, U+680f, U+6846, U+68cb, U+68f5, U+6b49, U+6b67, U+6c1b, U+6cc4, U+6cca, U+6d59, U+6d66, U+6d9b, U+6dcb, U+6e0a, U+6eaa, U+6ee9, U+6f0f, U+6f58, U+704c, U+7239, U+72ed, U+7329, U+7334, U+7391, U+7487, U+751c, U+752b, U+7545, U+754f, U+755c, U+7586, U+7624, U+76c6, U+76c8, U+76d2, U+76f2, U+76fc, U+77aa, U+77ac, U+77e3, U+77e9, U+77ee, U+78a7, U+7985, U+79a7, U+79d2, U+7a83, U+7b52, U+7ea4, U+7ef5, U+7f20, U+7f9e, U+7fc1, U+7fc5, U+7fd4, U+7fe0, U+8038, U+803b, U+8096, U+80ba, U+80c0, U+80f6, U+8116, U+81ed, U+8273, U+829d, U+838e, U+840d, U+8461, U+846c, U+853d, U+85aa, U+85e4, U+8679, U+86ee, U+871c, U+8822, U+886b, U+8877, U+88d5, U+88e4, U+88f8, U+8a93, U+8bb6, U+8c05, U+8c0a, U+8c2d, U+8d26, U+8d3c, U+8d3e, U+8d4c, U+8d50, U+8d5a, U+8d60, U+8d81, U+8dea, U+8f85, U+8f9f, U+8fbd, U+901d, U+9022, U+9042, U+906e, U+916c, U+94a6, U+94ed, U+94fe, U+9505, U+9521, U+95ef, U+9610, U+9640, U+9655, U+971e, U+987d, U+9888, U+98a0, U+9965, U+9a70, U+9a73, U+9aa4, U+9c8d, U+9e2d, U+9e45, U+9e7f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.11.woff2) format('woff2');
+ unicode-range: U+4ea9, U+4f1e, U+4fa8, U+4fef, U+5026, U+50da, U+50f5, U+5146, U+5154, U+51a4, U+51c4, U+522e, U+5239, U+526a, U+52cb, U+532a, U+5398, U+53a6, U+53c9, U+53e0, U+540f, U+5429, U+5492, U+5496, U+54b3, U+54ce, U+54d1, U+54e8, U+5561, U+5578, U+5583, U+55bb, U+5632, U+5662, U+56b7, U+5751, U+575f-5760, U+5784, U+5835, U+5937, U+59ca, U+59da, U+59dc, U+59e8, U+5a9a, U+5ab3, U+5be1, U+5be8, U+5c41, U+5cad, U+5d16, U+5de2, U+5de9, U+5df7, U+5dfe, U+5f0a, U+5f13, U+5f26, U+5fbd, U+6055, U+6073, U+60f6, U+60f9, U+6123, U+6127, U+6168, U+61be, U+61d2, U+621a, U+6284, U+62d0, U+62d3, U+62e2, U+632a, U+633d, U+6350, U+6367, U+638f, U+6398, U+6401, U+640f, U+6454, U+6495, U+64b0, U+64c5, U+65ec, U+6614, U+6627, U+6655, U+6670, U+676d, U+67c4, U+68cd, U+68d2, U+6b6a, U+6bb7, U+6cfc, U+6d12, U+6d74, U+6d78, U+6d85, U+6db5, U+6deb, U+6dee, U+6e20, U+6e58, U+6eb6, U+6ede, U+6ee5, U+6f06, U+70ad, U+7130, U+714c, U+715e, U+722a, U+723d, U+72c4, U+72d0, U+72ee, U+733f, U+73ab, U+7433, U+743c, U+74f7, U+75f4, U+7728, U+778e, U+780d, U+7816, U+7855, U+7891, U+7984, U+7a23, U+7a84, U+7a91, U+7b28, U+7b4b, U+7bee, U+7c98, U+7ee2, U+7f55, U+800d, U+8058, U+80a2, U+80be, U+8102, U+810a, U+813e, U+817a, U+819d, U+8205-8206, U+821f, U+8236, U+8292, U+8302, U+8305, U+8350, U+83e9, U+8404, U+84b2, U+84b8, U+84ec, U+8521, U+8776, U+87ba, U+8854, U+888d, U+88f9, U+8bbd, U+8c0d-8c0e, U+8c26, U+8c2c, U+8c31, U+8d1e, U+8eaf, U+8f69, U+8fb0, U+902e, U+9038, U+90ca, U+90e1, U+9489, U+9493, U+94a9, U+964c, U+9661, U+96c0, U+96cc, U+97ad, U+9881, U+9976, U+997c, U+9a84, U+9a9a, U+9e26, U+9f0e, U+9f9f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.12.woff2) format('woff2');
+ unicode-range: U+4e38, U+4e56, U+4e5e, U+4f3d, U+4f63, U+5029, U+508d, U+5151, U+515c, U+5180, U+51f0, U+5256, U+5288, U+52d8, U+52ff, U+5308, U+5319, U+5352, U+5378, U+5384, U+53a2, U+545c, U+5495, U+54a8, U+54b8, U+54c4, U+54c7, U+54d7, U+54df, U+5580, U+55d3, U+563b, U+563f, U+56da, U+574a, U+574e, U+5792, U+57ab, U+5824, U+584c, U+5858, U+58e4, U+58f6, U+5983, U+5992, U+5a1f, U+5a31, U+5a36, U+5ae9, U+5b9b, U+5ba0, U+5bc7, U+5c51, U+5c61, U+5cfb, U+5d14, U+5e06, U+5e18, U+5e62, U+5f66, U+5f6a, U+6021, U+602f, U+604d, U+62f1, U+632b, U+634f, U+635e, U+6380, U+6500, U+655e, U+658b-658c, U+65a9, U+65f1, U+673d, U+6756, U+6816-6817, U+682a, U+683d, U+6853, U+6869, U+6876, U+68da, U+68e0, U+690e, U+699c, U+6bd9, U+6c41, U+6c5d, U+6cab, U+6cbc, U+6cbe, U+6ce3, U+6dd8, U+6df9, U+6e17, U+6ea2, U+6ee8, U+707f, U+7092, U+70db, U+7109, U+711a, U+716e, U+7199, U+73ca, U+7470, U+7538, U+7779, U+7784, U+7792, U+7838, U+788c, U+7948, U+7977, U+79bd, U+79c3, U+7a3b, U+7a3d, U+7a9c, U+7ad6, U+7b1b, U+7bf7, U+7cd5, U+7eb1, U+7eba, U+7ec5, U+7ed1, U+7ee3, U+7f1a, U+7f50, U+8086, U+80f3, U+8155, U+818a, U+81a8, U+82a6, U+82af, U+82f9, U+8346, U+83ca, U+8511, U+864f, U+8681, U+8721, U+884d, U+886c, U+88d9, U+8a79, U+8b6c, U+8bc8, U+8be1, U+8bf5, U+8c10, U+8c15, U+8c1c, U+8c23, U+8c34, U+8c79, U+8d29, U+8d2c, U+8d31, U+8d3f, U+8d9f, U+8e22, U+8e29, U+8e72, U+8e81, U+8f74, U+8f7f, U+8f90, U+8f9c, U+8fa3, U+8fc4, U+8fe6, U+9017, U+90b1, U+9119, U+9187, U+94a5, U+94a7, U+94f8, U+953b, U+9551, U+960e, U+9699, U+96c1, U+9706, U+9709, U+9756, U+97f5, U+9882, U+9896, U+99a8, U+9a74, U+9a87, U+9b41, U+9b44;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.13.woff2) format('woff2');
+ unicode-range: U+4e10, U+4e19, U+4e2b, U+4f3a, U+4f51, U+4f84, U+4fa3, U+4fae, U+4ffa, U+500f, U+501a, U+516e, U+51a5, U+51b6, U+51f3, U+51ff, U+5203, U+5220, U+527f, U+52df, U+5300, U+53a5, U+53ed-53ee, U+54a7, U+54af, U+54c9, U+5587, U+55a7, U+55c5, U+55e1, U+55e3, U+5636, U+566a, U+56bc, U+573e, U+575d, U+576a, U+5783, U+57ae, U+5815, U+594e, U+5960, U+5962, U+5986, U+5993, U+59ec, U+5a25, U+5a49, U+5ac9, U+5bde, U+5c2c, U+5c34, U+5c7f, U+5c9a, U+5d0e, U+5e87, U+5f18, U+5f6c, U+60d5, U+6115, U+618e, U+61c8, U+62c2, U+62d9, U+62ef, U+6320, U+6346, U+6361, U+6363, U+63b7, U+6402, U+6405, U+6577, U+65a7, U+65f7, U+663c, U+6652, U+6664, U+6687, U+6691, U+66ae, U+6749, U+674f, U+6795, U+67a2, U+680b, U+6850, U+68a2, U+68ad, U+68b3, U+68d5, U+68fa, U+69b4, U+6a31, U+6bef, U+6c22, U+6c79, U+6ca6, U+6caa, U+6cb8, U+6ccc, U+6cf3, U+6cfb, U+6d46, U+6da1, U+6daf, U+6dd1, U+6eaf, U+6ed4, U+6f6d, U+6f84, U+6f9c, U+6fa1, U+7076, U+70c1, U+70e4, U+7115, U+71ac, U+71e5, U+72ac, U+72e1, U+72f8, U+7529, U+7574, U+75d2, U+7785, U+77a5, U+7802, U+786b, U+78b3, U+7a1a, U+7a3c, U+7aa5, U+7eac, U+7ed2, U+7ede, U+7ee5, U+7ef8, U+7f05, U+7f14, U+7fa1, U+803d, U+803f, U+8042, U+8165, U+818f, U+8299, U+82bd, U+830e, U+8335, U+836b, U+83b9, U+83bd, U+840e, U+841d, U+84c9, U+852c, U+8574, U+85c9, U+85e9, U+85fb, U+8650, U+8680, U+8695, U+86db, U+8700, U+8747, U+8859, U+8910, U+8bcf, U+8be7, U+8beb, U+8e44, U+8e48, U+8eac, U+901b, U+903e, U+904f, U+917f, U+949e, U+94ae, U+94c5, U+9556, U+9600, U+964b, U+965b, U+971c, U+9877, U+988a, U+9a7c, U+9ab8, U+9b45, U+9cb8, U+9cde, U+9e3d, U+9e64, U+9e9f, U+9ebd, U+9edb;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.14.woff2) format('woff2');
+ unicode-range: U+4e4d, U+4f36, U+4fcf, U+4fed, U+50fb, U+5140, U+51a2, U+51f8-51f9, U+533f, U+5395, U+53e8-53e9, U+5431, U+5450, U+5455, U+547b, U+548b, U+549a, U+54ee, U+54fa, U+5564, U+556a, U+557c, U+5594, U+55dc, U+55fd, U+560e, U+5618, U+561f, U+56a3, U+5764, U+57a3, U+5885, U+589f, U+59e5, U+5a05, U+5a76, U+5b7d, U+5ba6, U+5bdd, U+5c39, U+5c6f, U+5ced, U+5d4c, U+5e16, U+5e1c, U+5e90, U+5ed3, U+5ed6, U+5f70, U+5fd6, U+60af, U+60bc, U+60ed, U+6151, U+6177, U+61ff, U+6233, U+625b, U+627c, U+62da, U+62e3, U+631f, U+63c9, U+63fd, U+6487, U+64bc, U+64d2, U+655b, U+6590, U+65ed, U+664c, U+6726, U+6789, U+67a3, U+6805, U+6813, U+6868, U+6897, U+68d8, U+68f1, U+69fd, U+6a61, U+6b79, U+6bcb, U+6bd3, U+6c70, U+6cae, U+6d47, U+6d4a, U+6d4f, U+6da9, U+6dcc, U+6e3a, U+6e85, U+707c, U+7095, U+70af, U+70eb, U+714e, U+7184, U+718f, U+725f, U+73c0, U+7409, U+7410, U+7422, U+745b-745c, U+7476, U+74e3, U+7554, U+762b, U+766b, U+76cf, U+7729, U+772f, U+7737, U+77bb, U+77e2, U+77eb, U+7830, U+789f, U+78b1, U+78c5, U+78d5, U+78f7, U+7901, U+7980, U+79b9, U+79c9, U+7a98, U+7a9f, U+7aa6, U+7aff, U+7c07, U+7c3f, U+7c9f, U+7caa, U+7ef0, U+7ef7, U+7f06, U+7f15, U+7f38, U+7fd8, U+804b, U+80da, U+80e7, U+817b, U+819b, U+82d1, U+82df, U+83ba, U+83f1, U+840c, U+8471, U+8513, U+8654, U+865e, U+867e, U+8682, U+868a, U+86d9, U+8774, U+88d4, U+88d8, U+88f3, U+8944, U+895f, U+89c5, U+8ba5, U+8bb3, U+8bc0, U+8c41, U+8d2e, U+8d4e, U+8db4, U+8dcb, U+8e66, U+8f7c, U+8fc2, U+90b5, U+9102, U+914c, U+91c9, U+9499, U+9524, U+9576, U+968b, U+96ef, U+9885, U+9890, U+9893, U+9988, U+9a6f, U+9a86, U+9ad3, U+9ccd, U+9eef;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.15.woff2) format('woff2');
+ unicode-range: U+4ea5, U+4ed5, U+4f5f, U+4f88, U+5162, U+5189, U+51db, U+5254, U+5323, U+5366, U+53ae, U+53f1, U+53fd, U+542d, U+5443, U+5499, U+54a6, U+552c, U+553e, U+55e6, U+565c, U+575e, U+57a6, U+57d4, U+58d5, U+592d, U+5955, U+599e, U+5a62, U+5a6a, U+5a7f, U+5ae6, U+5b5c, U+5bb5, U+5be5, U+5c49, U+5c94, U+5cd9, U+5ce8, U+5d1b, U+5d2d, U+5e9a, U+5eb5-5eb6, U+5f27, U+5f8a, U+5f98, U+5fcf, U+5fd2, U+5fff, U+6020, U+608d, U+6096, U+60eb, U+618b, U+61e6, U+6252, U+6273, U+6292, U+62c7, U+62e7, U+62f4, U+631a, U+6342, U+63e3, U+63ea, U+6413, U+6479, U+64ce, U+659f, U+6666, U+6714-6715, U+6760, U+67ec, U+6808, U+68a8, U+6912, U+69bb, U+69d0, U+6a71, U+6a90, U+6b86, U+6c13, U+6c28, U+6c2f, U+6c40, U+6c81, U+6c9b, U+6ca7, U+6d3d, U+6d95, U+6dc0, U+6df3, U+6e23, U+6e5b, U+6fd2, U+7011, U+717d, U+7194, U+7261, U+7281, U+72c8, U+72e9, U+733e, U+742a, U+745a, U+7578, U+75a4, U+75ae, U+75ea, U+75f0, U+7682, U+7693, U+76d4, U+7736, U+7766, U+77d7, U+785d, U+7940, U+79ba, U+79fd, U+7a8d, U+7b77, U+7bf1, U+7ca4-7ca5, U+7cd9, U+7d0a, U+7d6e, U+7eca, U+7ece, U+7efd, U+7f00, U+7f09, U+7f0e, U+8098, U+80aa, U+80ae, U+812f, U+816e, U+81c0, U+821c, U+8235, U+8237, U+82ad, U+82b8, U+82d4, U+82db, U+8304, U+831c, U+84e6, U+851a, U+8549, U+8587, U+8718, U+8749, U+87f9, U+8845, U+889c, U+88f4, U+8902, U+8bc5, U+8bec, U+8c0f, U+8c1f, U+8d41, U+8d66, U+8dbe, U+8e31, U+8fed, U+901e, U+9091, U+90b8-90b9, U+90dd, U+9171, U+9176, U+918b, U+949d, U+94c0, U+94ee, U+94f2, U+9523, U+9525, U+952f, U+9698, U+9704, U+9716, U+9761, U+9774, U+978d, U+9798, U+97a0, U+97e7, U+9975, U+9977, U+9ae6, U+9e43, U+9f9a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.16.woff2) format('woff2');
+ unicode-range: U+4e1e, U+4ea2, U+4f0e, U+4f22, U+4f43, U+4f6c, U+4f6f, U+4f83, U+4fa5, U+4fac, U+4fde, U+502a, U+502d, U+5243, U+52fa, U+5315, U+5321, U+5349, U+5484, U+5486, U+548e, U+54aa, U+54c6, U+5514, U+5520, U+5543, U+55b3, U+55bd, U+55e4, U+55e8, U+5600, U+566c, U+568e, U+57a2, U+595a, U+59be, U+5a34, U+5b09, U+5b75, U+5c27, U+5c4e, U+5dcd, U+5df3, U+5e4c, U+5eff, U+5f1b, U+5fe1, U+5ff1, U+6043, U+6064, U+60da, U+60f0, U+60fa, U+61ca, U+620e, U+622e, U+62a8, U+62ce, U+62ed, U+62f7, U+62fd, U+631b, U+6345, U+634d, U+63ba, U+6400, U+655d, U+66d9, U+66f3, U+672d, U+67ab, U+67ff, U+6854, U+68a7, U+68b5, U+692d, U+695e, U+6986, U+69db, U+6a0a, U+6a35, U+6b89, U+6bb4, U+6c72, U+6c8c, U+6d3c, U+6da4, U+6dc6, U+6e0e, U+6eba, U+6ee4, U+6f47, U+6f88, U+708a, U+70ab, U+70b3, U+70bd, U+70d8, U+7118, U+72d2, U+7316, U+731d, U+741b, U+7426, U+748b, U+752d, U+759a, U+75a1, U+75b9, U+75f9, U+761f, U+763e, U+7696, U+7738, U+773a, U+776c, U+77a9, U+77bf, U+77f6, U+780c, U+7845, U+78cb, U+7960, U+7a20, U+7a57, U+7a92, U+7a96, U+7b03, U+7b20, U+7b5b, U+7c27, U+7eeb, U+7f2a, U+7f81, U+7fe9, U+8087, U+808b, U+809b, U+80f0, U+8113, U+81b3, U+81fb, U+8214, U+829c, U+82c7, U+8338, U+8367, U+83c1, U+83c7, U+846b, U+854a, U+857e, U+85af, U+86fe, U+8757, U+8760, U+88b1, U+892a, U+8bdb, U+8c12, U+8c1b, U+8c24, U+8c5a, U+8d42-8d43, U+8d63, U+8dc4, U+8e09, U+8e0c, U+8e6c, U+8e87, U+8f67, U+8f99, U+8fab, U+8ff8, U+9041, U+90a2, U+915d, U+948a, U+94b3, U+94dd, U+9508, U+9555, U+95f8, U+95fa, U+95fd, U+962e, U+9631, U+9647, U+9668, U+9685, U+96a7, U+96cd, U+970e, U+9776, U+988c, U+9a8f, U+9aa1, U+9ca4, U+9e25;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.17.woff2) format('woff2');
+ unicode-range: U+4e52-4e53, U+4eb5, U+4fd0, U+4fe8, U+4ffe, U+5014, U+5195, U+524c, U+52be, U+533e, U+5406, U+541d, U+5420, U+545b, U+5471, U+5480, U+548f, U+54dd, U+5544, U+55d2, U+55d4, U+5608, U+5657, U+5669, U+5693, U+56f1, U+5703, U+572d, U+574d, U+57e0, U+5811, U+5830, U+58a9, U+5944, U+598a, U+5a20, U+5a3c, U+5ad6, U+5ae3, U+5b5a, U+5b70, U+5bc5, U+5c91, U+5d69, U+5e27, U+5e37, U+5e54, U+5e61, U+5f29, U+5f57, U+5f5d, U+5f77, U+5f99, U+6005, U+606a, U+607a, U+609a, U+60b4, U+60b8, U+60cb, U+60d8, U+612b, U+6194, U+6289, U+62cc, U+6376, U+637b, U+6390, U+63a3, U+63b3, U+63cd, U+63d6, U+6414, U+64a9, U+64ae, U+6512, U+6518, U+6538, U+6555-6556, U+6656, U+66a8, U+66dd, U+6845, U+6977, U+6a44, U+6a59, U+6a80, U+6b83, U+6bd7, U+6be1, U+6c2e, U+6c90, U+6ca5, U+6cbd, U+6de4, U+6e89, U+6ec7, U+6f13, U+6f31, U+6f8e, U+70ac, U+70d9, U+70f9, U+7280, U+72de, U+7405, U+7459, U+74a7, U+7599, U+75c9, U+7629, U+76ce, U+776b, U+777e-777f, U+783e, U+78ca, U+78fa, U+7941, U+795f, U+797a, U+79be, U+79e7, U+7a79, U+7afa, U+7b0b, U+7b50, U+7b5d, U+7be1, U+7c38, U+7c7d, U+7cb1, U+7e82, U+7eb6, U+7eee, U+7f8c, U+7fce, U+807f, U+80b4, U+80fa, U+814b, U+8151, U+8153, U+8339, U+8403, U+8424, U+8475, U+849c, U+853c, U+8611, U+86df, U+8782, U+8815, U+8884-8885, U+8892, U+8912, U+8925, U+89d1, U+8bd8, U+8be3, U+8bf2, U+8bfd, U+8d3b, U+8d58, U+8f84, U+8f97, U+900d, U+914b, U+9163, U+9165, U+9175, U+94a0, U+94b5, U+94e2, U+9504, U+950c, U+951a, U+9619, U+961c, U+962a, U+96cf, U+96f3, U+9739, U+9785, U+97f6, U+987c, U+9889, U+9a6d-9a6e, U+9abc, U+9ccc, U+9e20, U+9e4a, U+9e66, U+9e93, U+9edd, U+9f8b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.18.woff2) format('woff2');
+ unicode-range: U+4e15, U+4e9f, U+4f8f, U+4fdf, U+504e, U+5055, U+50a9, U+5197, U+51cb, U+5201, U+5228, U+532e, U+5364, U+53fc, U+542e, U+5494, U+54d2, U+54e7, U+54fd, U+5506, U+5527, U+5567, U+558b, U+55d6, U+5676, U+576f, U+5942, U+5a77, U+5ae1, U+5ce6, U+5d3d, U+5d4b, U+5dc5, U+5e1a-5e1b, U+5f3c, U+6002, U+6026, U+6059, U+606c, U+60bb, U+60e6, U+60ee, U+60f4, U+61a7-61a8, U+61ac, U+620a, U+620d, U+621f, U+62bf, U+62c8, U+62d7, U+631d, U+634e, U+63e9, U+6410, U+6452, U+64ac, U+64b5, U+64c2, U+652b, U+66e6, U+67b7, U+6829, U+6862, U+6893, U+6960, U+6984, U+69a8, U+6a58, U+6c16, U+6c1f, U+6c5b, U+6c5e, U+6c76, U+6c7e, U+6c82, U+6cf5, U+6d52, U+6d5a, U+6d8e, U+6dc4, U+6e0d, U+6e1d, U+6e24, U+6e2d, U+6e32, U+6e44, U+6f09, U+6f29-6f2a, U+6f3e, U+6f66, U+701a, U+7099, U+70ec, U+72d9, U+73ba, U+73c2, U+73d1, U+7435-7436, U+747e, U+74e2, U+75a3, U+75ca, U+75d4, U+7622, U+7656, U+7688, U+76bf, U+779f, U+77b3, U+77dc, U+7889, U+7898, U+78be, U+78d0, U+79e4, U+7ae3, U+7b06, U+7b08, U+7b3a, U+7b4f, U+7b8d, U+7bab, U+7cdc, U+7eda, U+7f24, U+7f2d, U+7f94, U+7fcc, U+8006, U+8046, U+80e5, U+81ba, U+81c6, U+82b9, U+82de, U+82ef, U+8327, U+832c, U+8340, U+8343, U+8543, U+85d0, U+85e5, U+86e4, U+8712, U+8715, U+8717, U+8737, U+8785, U+87c0, U+87cb, U+87d2, U+8879, U+8936, U+8baa, U+8bb9, U+8bc3, U+8be0, U+8c11, U+8c1a, U+8c62, U+8de4, U+8df7, U+8dfa, U+8e1e, U+8e35, U+8e4b, U+8e51, U+8e6d, U+8e7f, U+8fe5, U+9035, U+916a, U+91ab, U+91dc, U+9497, U+94ce, U+94d0, U+95f5, U+9611, U+9713, U+97ec, U+996c, U+997a, U+9985, U+9992, U+9a79, U+9a7f, U+9ab7, U+9ac5, U+9b13, U+9ca8, U+9cc4, U+9e49, U+9ecf;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.19.woff2) format('woff2');
+ unicode-range: U+4e98, U+4f5a, U+4f7c, U+4ff8, U+504c, U+5080, U+50a3, U+50ed, U+5121, U+523d, U+536f, U+53df, U+5457, U+5478, U+5537, U+556c, U+5599, U+55df, U+55f3, U+564e, U+568f, U+5742, U+5777, U+587e, U+58d1, U+59d7, U+5a13, U+5a75, U+5ab2, U+5ad4, U+5bd0, U+5bf0, U+5c79, U+5c90, U+605a, U+6063, U+607b, U+607f, U+60ec, U+61f5, U+620c, U+6248, U+62a1, U+637a, U+6396, U+6482, U+64b8, U+64de, U+6525, U+6593, U+660a, U+664f, U+667e, U+6684, U+66a7, U+675e, U+67ad, U+6866, U+6930, U+6954, U+6988, U+6aac, U+6b24, U+6ba1, U+6c26, U+6c55, U+6c93, U+6cde, U+6d9f, U+6da3, U+6da7, U+6db8, U+6dd6, U+6e43, U+6e4d, U+6ea5, U+6ed5, U+6f33, U+701b, U+7096, U+70fd, U+7119, U+715c, U+71b9, U+728a, U+7313, U+7357, U+73e5, U+740f, U+7455, U+7490, U+749e, U+74ee, U+7504, U+7525, U+75b5, U+762a, U+7638, U+768b, U+7691, U+76c5, U+7708, U+7750-7751, U+777d, U+77b0, U+796f, U+79f8, U+7a37, U+7abf, U+7b19, U+7b75, U+7b93, U+7c0c, U+7edb, U+7eef, U+7f04, U+7f2e, U+7f30, U+7f61, U+7f9a, U+7fb2, U+7fb9, U+7fdf, U+80e4, U+80f1, U+8110, U+8354, U+837c, U+8426, U+8446, U+84d3, U+8517, U+8537, U+85d5, U+8638, U+868c, U+86c0, U+86ca, U+86f9, U+8708, U+873f, U+874e, U+8759, U+8783, U+87c6, U+87fe, U+891a, U+8bb7, U+8bd9, U+8be9, U+8bf0, U+8c00, U+8c19, U+8c29, U+8d30, U+8d53, U+8d61, U+8dda-8ddb, U+8e0a, U+8e1d, U+8e42, U+8e4a, U+8e59, U+8e8f, U+8f72, U+8f95, U+8f98, U+8fe2, U+9050, U+907d, U+9083, U+90af, U+9149, U+916e, U+92c6, U+946b, U+94a1, U+94be, U+9522, U+9535, U+9540, U+956f-9570, U+9609, U+9773, U+988d, U+989a, U+998b, U+9aa5, U+9cc3, U+9cd6, U+9e2f, U+9e33, U+9e3e, U+9e73, U+9ed4, U+9f3e, U+9f88;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.20.woff2) format('woff2');
+ unicode-range: U+4f2b, U+5043, U+531d, U+5345, U+53a9, U+5477, U+5482, U+54ab, U+555c, U+557e, U+558f, U+55eb-55ec, U+55f7, U+5664, U+5685, U+56d4, U+572a, U+579b, U+58ec, U+59a9, U+5a04, U+5a29, U+5a9b, U+5b7a, U+5c96, U+5cac, U+5cb1, U+5d47, U+5e96, U+5f64, U+5f87, U+5fa8, U+5fb5, U+5fd0-5fd1, U+6006, U+606b, U+60c6, U+6249, U+62a0, U+630e, U+634b, U+6382, U+642a, U+6485, U+65a1, U+6635, U+66dc, U+6840, U+6867, U+6886, U+690b, U+693f, U+6963, U+6995, U+69cc, U+69df, U+6a1f, U+6a47, U+6a79, U+6c50, U+6d04, U+6d35, U+6d93, U+6d9d, U+6dc7, U+6dd9, U+6dde, U+6e25, U+6e6e, U+6f7a, U+6f7c, U+6fd1, U+7078, U+710a, U+714a, U+7166, U+71ce, U+7252, U+72f0, U+73b7, U+749c, U+74d2, U+752c, U+753a, U+759f, U+75b1, U+75bd, U+75d8, U+75de, U+75e2-75e3, U+75eb, U+7600, U+7620, U+7663, U+76c2, U+778c, U+77a0, U+781a, U+7825, U+795b, U+79c6, U+7a51, U+7aa0, U+7b71, U+7bd3, U+7c41, U+7ce0, U+7d93, U+7eab, U+7ef6, U+7f28, U+7f54, U+7f79, U+7fe1, U+7ff1, U+8018-8019, U+8037, U+8146, U+817c, U+81fc, U+82a5, U+82ae, U+82d3, U+8309, U+8317, U+835a, U+835f, U+836a, U+8393, U+843c, U+84ff, U+8559, U+85b0, U+85d3, U+8671, U+8693, U+86a3-86a4, U+86aa, U+86af, U+86d0, U+86d4, U+86f0, U+8713, U+873b, U+874c, U+88a4, U+88c6, U+8c04, U+8c06, U+8c0c, U+8c25, U+8c27, U+8d48, U+8dfb, U+8e52, U+8f76, U+8f8d-8f8e, U+9019, U+9099, U+90f8, U+9157, U+9170, U+91ae, U+91ba, U+94ec, U+94ff, U+952d, U+9539, U+9541, U+95e9, U+95f0, U+95fe, U+9602, U+96bc, U+96f9, U+977c, U+9791, U+9894, U+98d3, U+98d9, U+9981, U+998d, U+9a8b, U+9aef, U+9afb, U+9c87, U+9cab, U+9cce, U+9cd7, U+9e5e, U+9e9d, U+9edc, U+9ee0, U+9f9b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.21.woff2) format('woff2');
+ unicode-range: U+4ec4, U+4fd1, U+4fda, U+500c, U+5048, U+51bd, U+527d, U+530d, U+5310, U+53c1, U+53f5, U+549b, U+549d, U+54bb, U+5511, U+556e, U+5575, U+557b, U+55e5, U+5624, U+567c, U+5729, U+57a0, U+57c2, U+5914, U+5919, U+5a11, U+5a32, U+5a4a, U+5b40, U+5b5b, U+5b62, U+5b6a, U+5b93, U+5b95, U+5bb8, U+5c8c, U+5cea, U+5f0b, U+5ffb, U+600f, U+61a9, U+61cb, U+623e, U+62c4, U+6371, U+63ac, U+63b0, U+6448, U+645e, U+647a, U+65cc, U+6619, U+6641, U+6773, U+67d1, U+67e0, U+683e, U+68e3, U+6924, U+6994, U+6998, U+69ad, U+69b7, U+6c10, U+6c32, U+6c69, U+6c74, U+6c85, U+6ca3, U+6cb1, U+6cd7, U+6cef, U+6d0c, U+6d5c, U+6d63, U+6e9f, U+6f15, U+6f5e, U+6fb9, U+6fc2, U+6fee, U+7080, U+70ef, U+70f7, U+71a0, U+71b5, U+724d, U+7325, U+737e, U+7579, U+7601, U+7634, U+765e, U+768e, U+7699, U+76f9, U+7762, U+7791, U+77ad, U+7827, U+78b4, U+7950, U+7957, U+7b94-7b95, U+7bb4, U+7bc6, U+7bdd, U+7c26, U+7c2a, U+7cbc, U+7cef, U+7ea3, U+7ead, U+7ebe, U+7f1c, U+7f42, U+8004, U+80c4, U+80eb, U+80ed, U+814c, U+81ca, U+81e7, U+8200, U+8210, U+828b, U+828d, U+8364, U+8368, U+839e, U+8431, U+84bf, U+84df, U+8568, U+866c, U+86c6, U+86ed, U+86f3, U+8703, U+8725, U+87b3, U+87d1, U+87e0, U+87ee, U+8821, U+8862, U+88e8, U+891b, U+8934, U+8bd2, U+8bff, U+8c14, U+8c1d, U+8c21, U+8c4c, U+8c7a, U+8c82, U+8e69, U+8f8f, U+8fe9, U+904e, U+90c5, U+915a, U+92ae, U+949a-949b, U+94e0, U+950f, U+9530, U+953a, U+9542, U+954c, U+9550, U+956d, U+9616, U+968d, U+96bd, U+972d, U+973e, U+97ed, U+98d2, U+98d5, U+9955, U+9968, U+9980, U+9990, U+9995, U+9a78, U+9ab0, U+9b03, U+9b47, U+9c88, U+9c91, U+9e35, U+9e44, U+9e51, U+9e6b, U+9ebe;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.22.woff2) format('woff2');
+ unicode-range: U+4f32, U+4f57, U+4f97, U+4fe6, U+507b, U+50ee, U+5106, U+51c7, U+520d, U+5241, U+535e, U+5453, U+54a3, U+550f, U+5530, U+5555, U+5577, U+559f, U+55b5, U+55d1, U+5601, U+562d, U+5659, U+566b, U+56e4, U+5773, U+57fd, U+5892, U+5925, U+592f, U+5958, U+59ab, U+5a40, U+5abe, U+5b34, U+5bee, U+5ccb, U+5d02, U+5d99, U+5e7a, U+5e8b, U+5e91, U+5ea0, U+5f01, U+5f08, U+6035, U+6078, U+6120, U+61d1, U+621b, U+626a, U+62ee, U+631e, U+6387, U+63b8, U+643d, U+64e2, U+659b, U+6631, U+6654, U+6748, U+679e, U+67b8, U+67da, U+67e9, U+693d, U+699b, U+69c1, U+6a50, U+6b46, U+6b81, U+6b92-6b93, U+6c30, U+6c8f, U+6cd3, U+6cfe, U+6d9e, U+6dae, U+6dbf, U+6dfc, U+6e4e, U+6ec2, U+6ed3, U+6ee6, U+6f62, U+6fe1, U+70e8, U+71a8, U+71d4, U+71ee, U+732c, U+736d, U+73de, U+7425, U+7428, U+757f, U+75b8, U+765c, U+7678, U+7768, U+7837, U+7949, U+7a88, U+7b1e, U+7b60, U+7ba9, U+7c91, U+7efa-7efb, U+7efe, U+7f08, U+7f25, U+7f2b, U+7f44, U+7fca, U+80bd, U+80ef, U+8174, U+8191, U+81c3, U+81fe, U+8207, U+822b, U+826e, U+82aa, U+82b7, U+82f7, U+82fb, U+8301, U+8369, U+836d, U+837b, U+8398, U+83e0, U+84d1, U+85dc, U+867b, U+869c, U+86a9, U+86b1, U+86c9, U+86ce, U+8734, U+876e, U+8882, U+8996, U+89ca, U+89ce, U+89d0, U+89e5, U+89ef, U+8bab, U+8bcb, U+8bdc, U+8be4, U+8bf3, U+8c16-8c18, U+8d4a, U+8d73, U+8e39, U+8e76, U+8fe8, U+8ff3, U+9005, U+905b, U+90ba, U+90cf, U+9131, U+916f, U+91af, U+92c8, U+94b0, U+94db, U+94e1, U+954d, U+9563, U+9573, U+95f1, U+967d, U+96c9, U+97af, U+98a7, U+98e7, U+996a, U+997d, U+9991, U+9a81, U+9a88, U+9aa7, U+9ad4, U+9cc5, U+9cdd, U+9e6d, U+9f87, U+9f8a, U+9f8c, U+9fa2;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.23.woff2) format('woff2');
+ unicode-range: U+4e69, U+4ee8, U+4f58, U+4f5e, U+4fea, U+50d6, U+5208, U+5250, U+525c, U+5476, U+54a4, U+54a9, U+54bf, U+54c2, U+5550, U+5576, U+55dd, U+55ea, U+55f2, U+55f5, U+5639, U+5654, U+5658, U+56e1, U+56ff, U+57a9, U+58f9, U+598d, U+59e3, U+5a23, U+5b51, U+5ba5, U+5cab, U+5cb7, U+5cd2, U+5d34, U+5d58, U+5e3c, U+5f11, U+5f95, U+5fdd, U+6029, U+603c, U+607d, U+610e, U+6175, U+61d4, U+629f, U+63c4, U+63c6, U+6421, U+6441, U+64b7, U+65ab, U+6615, U+6657, U+66b9, U+6775, U+6809, U+680e, U+684e, U+688f, U+6942, U+696b, U+6979, U+6989, U+6a3d-6a3e, U+6a84, U+6cc5, U+6cf8, U+6d39, U+6d94, U+6dc5, U+6de6, U+6ee2, U+6f4d, U+6fa7, U+6fef, U+723b, U+7284, U+7292, U+729f, U+72b7, U+72fb, U+7315, U+7360, U+742c, U+7441, U+7480, U+74a8, U+7566, U+75ff, U+7619, U+76e5, U+77fe, U+782d, U+783a, U+787c, U+789b, U+78a3, U+795a, U+7a95, U+7ad1, U+7ae6, U+7b25, U+7bd9, U+7c95, U+7ec9, U+7f45, U+7fe6, U+80db, U+80dd, U+80ea, U+80f4, U+814e, U+821b, U+827f, U+82a9, U+82c1, U+82e3, U+82eb, U+830f, U+832f, U+852b, U+858f, U+8707, U+871a, U+87a8, U+8839, U+883c, U+8869, U+8872, U+88df, U+8a48, U+8ba3, U+8bb4, U+8bcc, U+8be8, U+8bee, U+8c36, U+8d32, U+8d5d, U+8d6d, U+8dba, U+8e2e, U+8f71, U+8f94, U+8fe4, U+9082, U+9095, U+909d, U+90e2, U+914a, U+9162, U+919b, U+936a, U+948d, U+949c, U+94b4, U+94c2, U+94e3-94e4, U+94e8-94e9, U+94f0-94f1, U+951f, U+9528, U+9532, U+9537, U+95f6, U+95ff, U+9604, U+9608, U+9642, U+9701, U+970f, U+9730, U+9753, U+98e8, U+996f, U+9984, U+998a, U+998f, U+9997, U+99a5, U+9a9b, U+9ae1, U+9b51, U+9c7f, U+9c9f, U+9e2c, U+9e4c, U+9e57-9e58, U+9e82, U+9e8b, U+9e92, U+9f85;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.24.woff2) format('woff2');
+ unicode-range: U+4ec3, U+4f09, U+4fce, U+4fe3, U+4ff3, U+501c, U+50a5, U+5156, U+52d6, U+5326, U+539d, U+5464, U+5501, U+5591, U+59aa, U+59b2, U+59d8, U+5a55, U+5ab8, U+5b17, U+5b37, U+5b71, U+5b73, U+5c50, U+5cc1, U+5ce5, U+5d06, U+5d82, U+5e44, U+5ebe, U+5f2d, U+5fad, U+5ff8, U+608c, U+6215, U+6221, U+63ae, U+63ff, U+65d6, U+6636, U+6772, U+6860, U+69ab, U+69ed, U+6a5b, U+6b59, U+6c24, U+6c29, U+6ca4, U+6cf1, U+6cf7, U+6d43, U+6d54, U+6dec, U+6e0c, U+6e1a, U+6e5f, U+6eb4, U+7094, U+709c, U+70c3, U+70ca, U+70e9, U+7113, U+7168, U+7172, U+71e7, U+7230, U+7337, U+7511, U+75c2, U+75c8, U+75e4, U+75e8, U+77f8, U+7812, U+7823, U+7826, U+784e, U+7852, U+789c, U+7934, U+795c, U+79e3, U+7a17, U+7a2e, U+7a39, U+7aa3, U+7ab8, U+7afd, U+7b0f, U+7b15, U+7b24, U+7b2b, U+7bfe, U+7cb2, U+7d50, U+7ea5, U+7ecc, U+7ee6, U+7f19, U+7f22, U+7faf, U+7fbf, U+7ff3, U+8026, U+8028, U+8093, U+80b1, U+8198, U+8238, U+8244, U+82a8, U+82cb, U+82e1, U+8311, U+8385-8386, U+83cf, U+847a, U+84d6, U+85ae, U+865b, U+8662, U+869d, U+86a8, U+86b4, U+86de, U+86f4, U+870a, U+8748, U+87ea, U+886e, U+8888, U+88dc, U+88f1, U+8913, U+8921, U+8983, U+8a8a, U+8b07, U+8b8a, U+8bd3, U+8bd6, U+8bdf, U+8c32, U+8c55, U+8cea, U+8d5c, U+8d84, U+8d94, U+8df8, U+8e74, U+8f6d, U+9021, U+9068, U+9088, U+908b, U+909b, U+90e7, U+9146, U+91b4, U+933e, U+9397, U+93d6, U+93e1, U+94a8, U+94c9, U+9502-9503, U+9509, U+9534, U+954f, U+9577, U+9593, U+95fc, U+960b, U+9615, U+9670, U+9672, U+9697, U+9765, U+985e, U+988f, U+98a6, U+98da, U+9994, U+9a85, U+9a8a, U+9a9e, U+9ab6, U+9aed, U+9c82, U+9e22, U+9e28, U+9e6c, U+9ec3, U+9f10, U+9f39, U+9f89;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.25.woff2) format('woff2');
+ unicode-range: U+4f5d, U+4f7b, U+5028, U+520e, U+52ac-52ad, U+53a3, U+5421, U+544b, U+5454, U+54ad, U+54d0, U+556d, U+55c4, U+560c, U+5623, U+5627, U+5671, U+56df, U+56eb, U+573b, U+58c5, U+5924, U+5997, U+5a0c, U+5a7a, U+5aaa, U+5ca2, U+5d27, U+5d2e, U+5fe4, U+5ffe, U+6041-6042, U+6079, U+622c, U+62bb, U+65c3, U+65ce, U+677c, U+67b0, U+68c2, U+69ce, U+69ff, U+6a2f, U+6b87, U+6b9a, U+6bc2, U+6bd6, U+6c05, U+6c1a, U+6c68, U+6d31, U+6d60, U+6dab, U+6ddd, U+6f46, U+6f78, U+6fc9, U+6fe0, U+704f, U+725d, U+7396, U+73ae, U+73c8, U+73cf, U+740a, U+7430, U+74e4, U+74ef, U+7572, U+75a5, U+761b, U+77cd, U+781d, U+7887, U+789a, U+7947, U+7a14, U+7a70, U+7bd1, U+7cbd, U+7ec0, U+7ef1, U+7f02, U+7f1b, U+7f26, U+7f2c, U+7f9f, U+7fd5, U+8052, U+80cd, U+810d, U+8171, U+8178, U+81c1, U+81ec, U+8202, U+8284, U+828e-828f, U+8297, U+82a1, U+82be, U+82cc, U+82dc, U+835e, U+8365, U+8392, U+83df, U+83f8, U+8438, U+8469, U+84af, U+85ff, U+867c, U+86a7, U+86c4, U+86e9, U+879f, U+87ab, U+8813, U+8816, U+887e, U+8941, U+898b, U+89de, U+8aaa, U+8ba6, U+8bc2, U+8bf9, U+8c20, U+8c2a, U+8c2f, U+8dcf, U+8e14, U+8e47, U+8e7c, U+8f03, U+8f87, U+900b, U+9036, U+9051, U+9062, U+9074, U+9084, U+90ac, U+90db, U+90e6, U+9123, U+912f, U+9169, U+91aa, U+938f, U+948f, U+9492, U+94a4, U+94bf, U+94f5, U+9536, U+9549, U+958b, U+95f3, U+960f, U+9612, U+9617, U+9621, U+96d2, U+97a3, U+984c, U+9880, U+989e, U+98a2, U+990d, U+9954, U+9967, U+9969, U+996b, U+9a57, U+9ac1, U+9acb, U+9b08, U+9b49, U+9c86, U+9c8e, U+9c9b, U+9ca2, U+9ca7, U+9cb6, U+9cd5, U+9e29-9e2a, U+9e39, U+9e5a, U+9e5c, U+9ecd, U+9ede, U+9ee9, U+9f83, U+9f86;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.26.woff2) format('woff2');
+ unicode-range: U+4e5c, U+4fa9, U+5088, U+50f3, U+51eb, U+535f, U+536e, U+5412, U+5466, U+5472, U+55c9, U+55cc-55cd, U+56f5, U+56f9, U+571c, U+5785, U+57ad, U+5800, U+580b, U+59af, U+59d2, U+59f9, U+5a09, U+5ae0, U+5c98, U+5ce4, U+5d3e, U+5d4a, U+5dfd, U+5e19, U+5e42, U+5ea5, U+5fea, U+6106, U+6308, U+6332, U+63bc, U+63f6, U+643f, U+64e4, U+65ee-65ef, U+66f7, U+6777, U+6787, U+678b, U+67a5, U+67b3, U+67de, U+67e2, U+6841, U+6849, U+69a7, U+69ca, U+6c18, U+6c2a, U+6c4a, U+6d6f, U+6daa, U+6e86, U+6f74, U+7116, U+7131, U+7256, U+7266, U+7350, U+73e9, U+742e, U+746d, U+759d, U+75fc, U+7618, U+77fd, U+7809, U+7829, U+786a, U+7893, U+78ec, U+79b3, U+7b0a, U+7b2a, U+7b2e, U+7b33, U+7b38, U+7b3e, U+7b9d, U+7bb8, U+7c1f, U+7ea1, U+7ea8, U+7eb0, U+7ed4, U+7f01, U+7f1f, U+7f36, U+8069, U+80bc, U+80e8, U+8132, U+816d, U+8188, U+8222, U+823b, U+82ab, U+82b0, U+82c4, U+82d5, U+8334, U+835b, U+839c, U+83a0, U+83b4, U+83b8, U+83c0, U+83c5, U+83d6, U+83ec, U+84ba, U+853a, U+8572, U+868b, U+86f1, U+870d, U+8722, U+8788, U+87db, U+880a, U+8832, U+88a2, U+88b7, U+88e2, U+88f0, U+8ad6, U+8b49, U+8ba7, U+8bb5, U+8bce, U+8bd4, U+8d4d, U+8db8, U+8dbf, U+8dce, U+8dde, U+8df9, U+8e05, U+8e3d, U+9016, U+9032, U+90c3, U+90d3, U+90ef, U+90f4, U+9122, U+919a, U+91a2, U+93ca, U+94b9, U+94c6, U+9511-9512, U+9515, U+954a, U+9552, U+9562, U+95dc, U+9603, U+9606, U+960c-960d, U+96f1, U+975b, U+97ea, U+9808, U+982d, U+98a8, U+990a, U+992e, U+9974, U+9993, U+9a14, U+9a77, U+9a93, U+9aa0, U+9ac2, U+9b23, U+9b3b, U+9b43, U+9b4d, U+9cca, U+9ccf, U+9cdf, U+9e37, U+9e46, U+9e55, U+9e67, U+9e69, U+9ebc, U+9efe, U+9f0b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.27.woff2) format('woff2');
+ unicode-range: U+4e47, U+4ede-4edf, U+4f25, U+4f64, U+4f70, U+4f76, U+4faa, U+50e6, U+51fc, U+5216, U+52a2, U+52d0, U+52f0, U+530f, U+531a, U+5363, U+538d, U+54b4, U+54d4, U+5541, U+5556, U+55fe, U+5704, U+572e, U+57d9, U+5941, U+5a06, U+5b6c, U+5b84, U+5be4, U+5c59, U+5cc4, U+5d03, U+5d6c, U+5d74, U+5e11, U+5eea, U+5f40, U+5f89, U+6004, U+6092, U+60ad, U+6100, U+610d, U+634c, U+63b4, U+63be, U+64c0, U+64d8, U+65c6, U+6600, U+665f, U+6710, U+67d8, U+6800, U+6861, U+6934, U+6987, U+69f2, U+6a17, U+6c21, U+6d19, U+6d5e, U+6d91, U+6e6b, U+6edf, U+709d, U+70b7, U+7198, U+71b3, U+726f, U+728d, U+72ce, U+736c, U+736f, U+73b3, U+73d0, U+7548, U+755a-755b, U+7596, U+75cd, U+763f, U+766f, U+7747, U+77ec, U+783b, U+784c, U+7850, U+7857, U+7877, U+78a1, U+78d4, U+7a1e, U+7a31, U+7b31, U+7b6e, U+7ba7, U+7bc0, U+7bea, U+7c74, U+7cb3, U+7cc1, U+7cc5, U+7d30, U+7da6, U+7e2f, U+7e47, U+7f03, U+7f17, U+7fb8, U+802a, U+8043, U+8084, U+809f, U+80ab, U+80d7, U+816b, U+8249, U+824f, U+829f, U+82ce, U+82e4, U+82f4, U+8331, U+83d4, U+859c, U+8655, U+867a, U+867f, U+86d1, U+86d8, U+872e, U+877c, U+87ad, U+87ca, U+8853, U+88e5, U+88fe, U+89f3, U+8a07, U+8a3a, U+8abf, U+8bf6, U+8c07, U+8c30, U+8c89, U+8d3d, U+8d45, U+8d67, U+8dc6, U+8dd7, U+8e5a, U+8f73, U+8f78, U+9026, U+9052, U+90a8, U+9104, U+91dd, U+9322, U+9485, U+94aa, U+94ba, U+94bc, U+94c4, U+94e7, U+9506, U+9529, U+9538, U+9567, U+95eb, U+96ce, U+96e0, U+9792, U+97ab, U+97b4, U+989b, U+98f2, U+9983, U+9a9c, U+9b2f, U+9c80, U+9c85, U+9c8b, U+9ca1, U+9cae, U+9cb0-9cb2, U+9e31, U+9e41-9e42, U+9e68, U+9ee2, U+9f0d, U+9f2c, U+9f51, U+9f80;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.28.woff2) format('woff2');
+ unicode-range: U+4e93, U+4eb3, U+4f27, U+4f65, U+4f94, U+4fc5, U+5025, U+502c, U+502e, U+507e, U+50a7, U+51bc, U+5452, U+54cc, U+54de, U+5533, U+553f, U+5549, U+5581, U+55be, U+560f, U+561e, U+564c, U+5768, U+57a1, U+5807, U+5889, U+5a67, U+5ad8, U+5af1, U+5b16, U+5cb5, U+5cbf, U+5d1e, U+5d9d, U+5e14, U+5edb, U+5f9c, U+6019, U+601b, U+602b, U+6126, U+614a, U+6206, U+6266, U+62ca, U+646d, U+64ba, U+6634, U+6677, U+668c, U+6753, U+67b5, U+6901, U+695d, U+6966, U+6978, U+69b1, U+6aa9, U+6b9b, U+6ce0, U+6d2e, U+6d33, U+6e11, U+6ec1, U+6f8d, U+705e, U+7110, U+712f, U+7145, U+7178, U+72ef, U+72f2, U+72f7, U+7322, U+73f2, U+748e, U+74f4, U+7519, U+7583, U+75b4, U+75f1, U+76cd, U+7726, U+7817, U+7839, U+7a80, U+7b04, U+7c9c-7c9d, U+7ca2, U+7d05, U+7d9d, U+7db2, U+7e3b, U+7e7b, U+7ef2, U+7f07, U+7f12, U+7f2f, U+7f31, U+7f58, U+7f5f, U+7f71, U+7f74, U+7f7e, U+7fa7, U+7fb0, U+8012, U+80b7, U+80c2, U+80fc, U+8118, U+815a, U+8166, U+81bb, U+81df, U+81e8, U+8228, U+827d, U+828a, U+82a4, U+8314, U+834f, U+8360, U+837d, U+83bc, U+83f9, U+83fd, U+840b, U+8411, U+8418, U+844e, U+846d, U+853b, U+85a8, U+85b9, U+8605, U+8616, U+86ac, U+86b6, U+86cf, U+8709, U+8723, U+8763, U+877d, U+87ac, U+87af, U+881b, U+887d, U+887f, U+88c9, U+88ce, U+88e1, U+88fc, U+892b, U+8a8d, U+8bfc, U+8de3, U+8deb, U+8e2f, U+8e70, U+8e85, U+8f15, U+9069, U+90fe, U+91a3, U+91b5, U+943e, U+948b-948c, U+9495, U+94a3, U+94ad, U+94cd, U+94f3, U+9517, U+9546, U+955b, U+955e, U+956b, U+9649, U+965f, U+96b3, U+96d6, U+97eb, U+988e, U+9ab1, U+9acc, U+9ad1, U+9b48, U+9ca0, U+9cd4, U+9cda, U+9ce2, U+9e2b, U+9e36, U+9eb8, U+9f17, U+9f19;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.29.woff2) format('woff2');
+ unicode-range: U+4eeb, U+506c, U+510b, U+5456, U+54d9, U+55b1, U+562c, U+567b, U+56af, U+581e, U+586c, U+5880, U+5ad2, U+5b32, U+5c25, U+5ca3, U+5d24, U+5d5b, U+5d5d, U+5d6f, U+5e0f, U+5e5b, U+5e80, U+5eb9, U+60b1, U+61b7, U+6217, U+6225, U+6339, U+6369, U+636d, U+6535, U+656b, U+66db, U+66e9, U+670a, U+6864, U+696e, U+69d4, U+6a18, U+6b39, U+6c5c, U+6c86, U+6cd4, U+6ceb, U+6cee, U+6cf6, U+6d7c, U+6e16, U+6e54, U+6e98, U+6ea7, U+6fb6, U+6fde, U+7023, U+7085, U+70b1, U+70bb, U+7173, U+71f9, U+72b8, U+72cd, U+730a, U+7317, U+738e, U+73a2, U+7477, U+74e0, U+752f, U+753e, U+7540, U+75a0, U+75b3, U+75e7, U+7654, U+76b4, U+76f1, U+7707, U+7743, U+7765, U+778b, U+77bd, U+77c7, U+7800, U+781c, U+7856, U+78d9, U+7955, U+7987, U+79eb, U+7a78, U+7aa8, U+7aad, U+7ab3, U+7b47, U+7baa, U+7bc1, U+7be6, U+7bef, U+7c7c, U+7cc7, U+7d04, U+7d44, U+7d71, U+7de9, U+7e8c, U+7ee8, U+7f21, U+7f23, U+8080, U+80ad, U+80d9, U+823e, U+8291, U+82ca, U+83a9-83aa, U+83d8, U+8451, U+845a, U+848c, U+84fc, U+8556, U+8629, U+863c, U+866e, U+868d, U+86b0, U+86f2, U+87bd, U+8844, U+88bc, U+88e3, U+890a, U+8930, U+89ba, U+89c0, U+8acb, U+8b1d, U+8c35, U+8d40, U+8e49, U+8f49, U+8f6b, U+8f8a, U+8f9a, U+8fd3, U+8fd5, U+9004, U+9011, U+902d, U+902f, U+9044, U+904b, U+90b0, U+911e, U+9143, U+9150, U+918d, U+91ad, U+928e, U+9487, U+948e, U+9494, U+94ab, U+94af, U+94cb, U+94d2, U+94ef, U+950a, U+951b-951c, U+9531, U+953c, U+953f, U+960a, U+96b1, U+96b9, U+96e2-96e3, U+9794, U+9838, U+9987, U+9a7a, U+9a7d, U+9ac0, U+9b1f, U+9b88, U+9c83, U+9c9a, U+9cc7, U+9cd9, U+9e3a, U+9e48, U+9e6a, U+9e6e, U+9e71, U+9e7e, U+9e87, U+9ee7;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.30.woff2) format('woff2');
+ unicode-range: U+4ee1, U+4f1b, U+4f89, U+4fdc, U+50ec, U+523f, U+5423, U+54cf, U+54ff, U+5522, U+55b9, U+5793, U+57b4, U+59a3, U+59dd, U+5b65, U+5c15, U+5c3b, U+5c9c, U+5d26, U+5d6b, U+5f58, U+609d, U+60ab, U+6434, U+6484, U+6549, U+65c4, U+65d2, U+65f0, U+6661, U+669d, U+66be, U+674c, U+676a, U+67d9, U+680c, U+6874, U+6939, U+698d, U+69e0, U+6a65, U+6a8e, U+6aa0, U+6b84, U+6b8d, U+6bb3, U+6c19, U+6da0, U+6e2b, U+6e53, U+6e8f, U+6eb2, U+6ef9, U+6f2f, U+717a, U+7228, U+72fa, U+7321, U+734d, U+7457, U+74a9, U+74ff, U+7513, U+754b, U+76a4, U+76b2, U+7719, U+772c, U+775a, U+7818, U+782c, U+7847, U+786d, U+78ba, U+78f4, U+7946, U+794e, U+7962, U+79ed, U+7a40, U+7a4d, U+7a86, U+7aac, U+7b4c, U+7b72, U+7ccc, U+7d0d, U+7d39, U+7dad, U+7dda, U+7e2e, U+7e54, U+7ee1, U+7f0c, U+7f11, U+7f27, U+7f68, U+7fa9, U+7fbc, U+7fd2, U+7fe5, U+809c, U+80e9, U+8108, U+8114, U+8139, U+8182, U+822f, U+825a, U+825f, U+82b4, U+82d2, U+8315, U+832d, U+8348, U+8366, U+8378, U+83a8, U+83b3, U+83e1, U+83ea, U+83f0, U+845c, U+84a1, U+84b4, U+84cd, U+8579, U+8585, U+85c1, U+8627, U+877e, U+87e5, U+885b, U+89da, U+8a3e, U+8a71, U+8c02, U+8c33, U+8c47, U+8c49, U+8ca2, U+8d49, U+8db5, U+8dd6, U+8dec, U+8df6, U+8e1f, U+8e40, U+8e53, U+8edf, U+8f82, U+8fa6, U+9023, U+9054, U+9078, U+907a, U+90b3, U+9139, U+917d, U+9190, U+9224, U+9490, U+94bd, U+94cc, U+94d1, U+9507, U+950d, U+9513-9514, U+9516, U+9518, U+951d-951e, U+952a, U+952c, U+9544-9545, U+9553, U+956a, U+956c, U+9580, U+9589, U+961a, U+97b2, U+97ff, U+9810, U+9867, U+986f, U+98cf, U+9a98, U+9adf, U+9b46, U+9c94, U+9ca5, U+9cb5, U+9cb7, U+9e32, U+9e38, U+9efc;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.31.woff2) format('woff2');
+ unicode-range: U+4ef5, U+4f74, U+4f91, U+50ba, U+5240, U+5261, U+5282, U+53fb, U+5416, U+5432, U+5459, U+54d3, U+5769, U+577c, U+57a7, U+5844, U+58bc, U+5981, U+5a08, U+5adc, U+5aeb, U+5b53, U+5c63, U+5cbd, U+5db7, U+5def, U+5ee8, U+5fbc, U+5fc9, U+6003, U+600d, U+603f, U+609b, U+6222, U+623d, U+63ce, U+6603, U+6769, U+6798, U+67a8, U+67f0, U+680a, U+6855, U+686b, U+6877, U+68f9, U+68fc, U+6b37, U+6b43, U+6bfd, U+6c06-6c07, U+6cad, U+6d07, U+6de0, U+6f4b, U+6f8c, U+70c0, U+71e0, U+7301, U+731e, U+7352, U+73c9, U+74ba, U+750f, U+754e, U+7594, U+760c, U+7630, U+77ef, U+7811, U+783c, U+78a5, U+78b2, U+78b6, U+78f2, U+794f, U+7967, U+79d5, U+7ac5, U+7b46, U+7ba8, U+7c21, U+7c40, U+7c64, U+7c8b, U+7ccd, U+7cd7, U+7ce8, U+7d61, U+7d66, U+7df4, U+7e3d, U+7e9b, U+7ebb, U+7f0b, U+7f0d, U+7f9d, U+800b, U+801c, U+806c, U+8167, U+81bd, U+8233-8234, U+8268, U+8288, U+82c8, U+8351, U+83b6, U+8401, U+8406, U+842c, U+8473, U+8476, U+8478, U+84ca, U+8564, U+8570, U+85b7, U+86b5, U+877b, U+878b, U+8793, U+87f2, U+88b4, U+8919, U+898f, U+8a08, U+8a13, U+8a2d, U+8a66, U+8a9e, U+8aa4, U+8b02, U+8b58, U+8b70, U+8b77, U+8b80, U+8b93, U+8c2e, U+8c3f, U+8c42, U+8c73, U+8c98, U+8c9d, U+8cc7, U+8dbc, U+8dfd, U+8f7e, U+8f8b, U+9060, U+90dc, U+9129, U+918c, U+91cb, U+94d9, U+950e, U+952b, U+953e, U+9554, U+9557, U+955d, U+966c, U+96a8, U+96b0, U+96fb, U+9708, U+97ac, U+9805, U+983b, U+9852, U+9878, U+989f, U+98a1, U+9a90, U+9a96, U+9aba, U+9af9, U+9b06, U+9c15, U+9c3d, U+9c56, U+9c67, U+9c72, U+9c8c, U+9cad, U+9cb3, U+9cd0, U+9ce1, U+9d70, U+9e2e, U+9e3b, U+9e47, U+9e4b, U+9e5b, U+9e63, U+9eb4, U+9ed2, U+9ee5;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.32.woff2) format('woff2');
+ unicode-range: U+4f7e, U+5107, U+5281, U+54da, U+56dd, U+5709, U+572f, U+5739, U+574c, U+577b, U+5786, U+57d2, U+57da, U+5819, U+584d, U+5c22, U+5c99, U+5e3b, U+5f56, U+5f82, U+6083, U+60dd, U+615d, U+6243, U+6420, U+6426, U+6499, U+661d, U+67fd, U+6832, U+68f0, U+691f-6920, U+6a28, U+6aab, U+6bf5, U+6c3d, U+6c94, U+6d0e, U+6d4d, U+6eb1, U+6eb7, U+6ebd, U+6f36, U+727e, U+72b4, U+72c1, U+72f4, U+7331, U+739f, U+73d9, U+75ac, U+76e1, U+7722, U+773e, U+7780, U+77fb, U+781f, U+78fb, U+7905, U+790c, U+790e, U+7953, U+7a69, U+7b5a, U+7bc4, U+7c9e, U+7cab, U+7d1a, U+7d55, U+7d5c, U+7e7c, U+7eae, U+7ec1-7ec2, U+7f0f, U+7f1e, U+7f35, U+7fd9, U+8071, U+80ec, U+8129, U+812b, U+8148, U+8173, U+819a, U+81a0, U+81bf, U+81e5, U+822d, U+824b, U+8298, U+8300, U+831b, U+8347, U+835c, U+83dd, U+83e5, U+840f, U+841c, U+8449, U+84cb, U+84da, U+8548, U+857b, U+8591, U+85da, U+85f4, U+8667, U+86ba, U+86f8, U+8731, U+8753, U+8770, U+8856, U+88fd, U+895e, U+897b, U+89c7, U+89cb, U+8a0e, U+8a18, U+8a31, U+8c8a, U+8c94, U+8caa, U+8cac, U+8d52, U+8d5f, U+8d91, U+8db1, U+8e2c, U+8e30, U+8e9e, U+8eca, U+8f09, U+8fee, U+8ff4, U+9031, U+908a, U+90a0, U+90bd, U+90d7, U+90ff, U+9117, U+915e, U+9161, U+9164, U+91a1, U+932f, U+936c, U+93ae, U+9486, U+94c8, U+94ca, U+94d6-94d7, U+94e6, U+954e, U+9560-9561, U+9568, U+95b1, U+9607, U+9654, U+9673, U+9678, U+9688, U+968e, U+96aa, U+96d9, U+96dc, U+96f0, U+975c, U+985f, U+9871, U+9899, U+9902, U+9918, U+9a5a, U+9a80, U+9a8e, U+9a99, U+9a9d, U+9aeb, U+9aee, U+9b18, U+9b8a, U+9ba0, U+9bae, U+9c47, U+9cb4, U+9cbd, U+9cdc, U+9d87, U+9e4e, U+9e88, U+9efb, U+9f29, U+9f8d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.33.woff2) format('woff2');
+ unicode-range: U+5233, U+5293, U+537a, U+5523, U+5588, U+5686, U+57b8, U+57dd, U+57e4, U+57ef, U+57f8, U+5881, U+5ab5, U+5e5e, U+5ed1, U+5fee, U+6067, U+620b, U+62f6, U+638a, U+63e0, U+641b, U+6445, U+6509, U+652e, U+6534, U+67d2, U+67dd, U+6833, U+6883, U+6a7c, U+6a97, U+6b82, U+6cd0, U+6cfa, U+72b0, U+72f3, U+741a, U+7610, U+7617, U+764d, U+771a, U+7787, U+778d, U+77e7, U+784f, U+7881, U+78c9, U+7919, U+7986, U+798a, U+79fe, U+7a13, U+7a1c, U+7b90, U+7b9c, U+7bac, U+7bcc, U+7be0, U+7c0b, U+7c0f, U+7c8e, U+7caf, U+7cde, U+7d77, U+7dae, U+7dca, U+7e20, U+7e94, U+7ed0, U+7fee, U+8035, U+804d, U+8072, U+807d, U+8112, U+811e, U+8158, U+81a9, U+81ac, U+81af, U+81cd, U+8201, U+8208, U+8256, U+8306-8307, U+8332, U+83c3, U+83e7, U+83ef, U+8490, U+8497, U+84a8, U+84b9, U+84c1, U+84d0, U+84e3, U+84e5, U+855e, U+85ed, U+865f, U+8729, U+873e, U+8765, U+889d, U+88aa, U+88d2, U+8907, U+8914, U+8966, U+89cf, U+89eb, U+89f8, U+8a72-8a73, U+8ac7, U+8ae1, U+8af8, U+8b5e, U+8b89, U+8c1e, U+8c2b, U+8c68, U+8c85, U+8c93, U+8ca0, U+8ca9, U+8cb4, U+8cbb-8cbc, U+8d59, U+8e41, U+8e60, U+8e6f, U+8e7b, U+8e90, U+8f36, U+8faf, U+8ffb, U+9079, U+9097, U+90e4, U+90eb, U+91c6, U+91d0, U+934f, U+93af, U+942e, U+94ac, U+94b8, U+94d5, U+94df, U+94eb, U+94f7, U+955f, U+962f, U+963c, U+9660, U+9674, U+969b, U+96de, U+96e9, U+9728, U+972a, U+9748, U+9806, U+9817, U+984f-9850, U+9883, U+98db, U+98ef, U+9978, U+997e, U+9998, U+9a69, U+9aa2, U+9b31, U+9b5f, U+9b9f, U+9c8f-9c90, U+9c95, U+9ca6, U+9ca9, U+9cbb, U+9cbf, U+9cc8, U+9cd1, U+9cf4, U+9dc9, U+9ddf, U+9e30, U+9ea5, U+9ebf, U+9edf, U+9ef9, U+9f02, U+9f82;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.34.woff2) format('woff2');
+ unicode-range: U+4ec2, U+4edd, U+5155, U+551b, U+564d, U+572c, U+576d, U+57a4, U+57cf, U+57d5, U+57d8, U+57ed, U+57f4, U+580d, U+5820, U+593c, U+59a4, U+5c66, U+5fed, U+619d, U+63f8, U+64d0, U+67c1, U+6844, U+6910, U+6c46, U+6c54, U+6d2b, U+6ecf, U+721d, U+72c3, U+7339, U+73e7, U+7481, U+7625, U+7633, U+7635, U+7643, U+76e4, U+7704, U+770a, U+770d, U+7843, U+78fe, U+7913, U+7942, U+799b, U+7b74, U+7b78, U+7c33, U+7d00, U+7d2c, U+7d41-7d42, U+7d72, U+7d9c, U+7db1, U+7de1, U+7e78, U+7e96, U+7ea9, U+7ecb, U+7ed6, U+7f33, U+7f3b, U+7fdb, U+805e, U+80e0, U+812c, U+8160, U+8169, U+81ab, U+81ae, U+81c5, U+81c9, U+81cc, U+8204, U+8209, U+830c, U+8316, U+8477, U+84bd, U+84ee, U+8500, U+850c, U+850e, U+852f, U+857a, U+857f, U+85a4, U+8607, U+860b, U+8661, U+8701, U+8766, U+8798, U+87b5, U+87eb, U+8803, U+880b, U+8886, U+888a, U+8893, U+889b, U+88dd, U+89a9, U+8a09, U+8a22, U+8a55, U+8a5e, U+8a7e, U+8a8c, U+8b34, U+8b39, U+8b9f, U+8bea, U+8c90, U+8c99, U+8d06-8d07, U+8d33, U+8d36, U+8d55, U+8da8, U+8dbd, U+8e50, U+8e68, U+8e9c, U+8f14, U+8f33, U+8f4e, U+8f79-8f7a, U+8f80, U+8fb2, U+90a1, U+90b4, U+90be, U+90c4, U+9172, U+917a, U+9240-9241, U+9280, U+92a7, U+92ec, U+9304, U+934b, U+9369, U+93b0, U+9418, U+9451, U+94b2, U+94d3, U+94ea, U+9628, U+963d, U+9663, U+968a, U+96f2, U+9705, U+9711, U+9766, U+9770, U+9778, U+97a1, U+97ae, U+9818, U+982b, U+9857, U+992c, U+9979, U+99ee, U+9a03, U+9a75, U+9a83, U+9ac6, U+9b02, U+9b32, U+9ba1, U+9ba3, U+9bd4, U+9bee, U+9c1c, U+9c21, U+9c89, U+9c9e, U+9cc0, U+9d25, U+9d73, U+9e0a, U+9e61, U+9e7c-9e7d, U+9e84, U+9f2f, U+9f37, U+9f7e, U+9f81, U+9fa0;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.35.woff2) format('woff2');
+ unicode-range: U+553c, U+575c, U+576b, U+5c88, U+605d, U+6343, U+67a7, U+6980, U+6d27, U+6ee0, U+6f72, U+6f89, U+750d, U+7615, U+772d, U+7752, U+777a, U+77a2, U+7871, U+791e, U+796b, U+798d, U+79bf, U+7aa9, U+7b30, U+7b4d, U+7b96, U+7ba6, U+7bda, U+7be5, U+7c65, U+7c8c, U+7c9a, U+7d14, U+7d19, U+7d24, U+7d45, U+7d7c-7d7d, U+7de3, U+7e31, U+7e6b, U+7e81, U+7ee0, U+7f3d, U+7f63, U+7f7d, U+7fb6, U+7fe7, U+7ff9, U+8016, U+8027, U+8031, U+8056, U+805b, U+806d, U+806f, U+8077, U+808f, U+812e, U+81a6, U+81b6, U+81b9, U+81cf, U+81dc, U+8216, U+8221, U+8308, U+8310, U+833c, U+8396, U+83a4, U+83d1, U+8429, U+844c, U+8470, U+8545, U+8599, U+8652, U+871e, U+8764, U+8797, U+879d, U+885d, U+88a3, U+88a7, U+88c8, U+89cc-89cd, U+89d4, U+8a04, U+8a0a, U+8a17, U+8a19, U+8a62, U+8a96, U+8a98, U+8ab2, U+8af9, U+8b3f, U+8c50, U+8c6c, U+8c8f, U+8ca7, U+8cb7, U+8cc8, U+8ce6, U+8cf4, U+8d05, U+8d46-8d47, U+8dd0, U+8e23, U+8e45, U+8e5f, U+8e84, U+8ebc, U+8ecc, U+8f13, U+8f38, U+8fbb, U+8fef, U+903f, U+9046, U+9058, U+9072, U+90b2, U+90b6, U+90c7, U+90d5, U+90d9, U+911a, U+912c, U+9156, U+9179, U+9185, U+91e4, U+9226, U+9264, U+92b3, U+92f5, U+92f9, U+9375, U+93ad, U+9423, U+943b, U+9498, U+94cf, U+94da, U+94fc, U+9559, U+9569, U+9571, U+9574, U+9592, U+959f, U+95a4, U+95ae, U+95c6-95c7, U+9618, U+9641, U+9667, U+96bb, U+97fb, U+9863, U+9869, U+98a5, U+98d1, U+98d7, U+98fd, U+9917, U+994b, U+99ac, U+99da, U+9a3e, U+9a95, U+9b4b, U+9b80, U+9b84, U+9bc6, U+9bd2, U+9bdd, U+9c01, U+9c28, U+9c32, U+9c64, U+9c6f, U+9c75, U+9c99, U+9cc1, U+9cd3, U+9cd8, U+9e40, U+9e79, U+9e91, U+9ee8, U+9f41, U+9f52, U+9f61;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.36.woff2) format('woff2');
+ unicode-range: U+4ec9, U+4ef3, U+5290, U+54d5, U+552a, U+5eb3, U+5ed2, U+640b, U+681d, U+6baa, U+6c15, U+6cd6, U+6d1a, U+6ebb, U+6ed7, U+7039, U+728b, U+75e6, U+76c7, U+76e3, U+7730, U+7733, U+7735, U+774f, U+7793, U+77d4, U+77de, U+785a, U+7895, U+7921, U+7926, U+7954, U+796a, U+797c, U+798b, U+7998, U+79f5, U+7a03, U+7a48-7a4a, U+7b1f, U+7b39, U+7b45, U+7b58, U+7b62, U+7ba0, U+7be9, U+7bf8, U+7c3e, U+7cc8, U+7d6a, U+7d8e, U+7dd2, U+7ef9, U+7f76, U+7f91, U+7fc0, U+7fc3, U+8029, U+80f2, U+8105, U+8144, U+81ad, U+81b5, U+81ce, U+81d1-81d2, U+81fa, U+8232, U+825e, U+82fe-82ff, U+833a, U+839b, U+83be, U+83cd, U+83e2, U+8459, U+8474, U+84b7, U+84bc, U+8502, U+8538, U+8557, U+8561, U+85bf, U+85de, U+873a, U+8758, U+875f, U+87ec, U+8852, U+8889, U+8891, U+88a0, U+88a9, U+8955, U+8962, U+89dd, U+89f1, U+8a02, U+8a12, U+8a1a, U+8b1b, U+8b3a, U+8b62, U+8b9d, U+8bd0, U+8c09, U+8c9e, U+8caf, U+8ce3, U+8ce8, U+8cf8, U+8cfc, U+8d95, U+8da5, U+8da9, U+8dcd, U+8dd3, U+8e64, U+8e94, U+8ecd, U+8ef8, U+8eff, U+8f58, U+8f75, U+900c, U+904a, U+9055, U+905e, U+90bf, U+90d0, U+9109, U+9130, U+918a, U+91bf, U+91d8, U+9227-9229, U+92fc, U+93f0, U+9413, U+9481, U+953d, U+9548, U+955a, U+9583, U+95b7, U+95c5, U+95ca, U+9683, U+96d4, U+971a, U+9793, U+97e5, U+9802-9803, U+9809, U+9820, U+98e2, U+9951, U+9958, U+9982, U+99f5, U+99f8, U+9a40, U+9a45, U+9a9f, U+9aaf, U+9ad2, U+9ae4, U+9b0f, U+9b1b, U+9b5a, U+9bbb, U+9c09, U+9c2a, U+9c65, U+9c7e, U+9c84, U+9c8a, U+9c9d, U+9ca3, U+9cc6, U+9cc9, U+9ce4, U+9cf0, U+9d2b, U+9d31, U+9d8e, U+9e5f, U+9e97, U+9ec9, U+9eea, U+9ef4, U+9f9c, U+9fa4;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.37.woff2) format('woff2');
+ unicode-range: U+522d, U+525e, U+54dc, U+5f61, U+6322, U+638e, U+63de, U+63f2, U+6971, U+6a91, U+6c0d, U+7303, U+75d6, U+7605, U+760a, U+763c, U+770e, U+7725, U+772b, U+7746, U+774a, U+775e, U+776a, U+77bc, U+7822, U+7832, U+7841, U+78bc, U+798e, U+7991, U+79a6, U+79ec, U+7a05, U+7a16, U+7a1f, U+7a6a, U+7a8b, U+7ac7, U+7b07, U+7b66, U+7b70, U+7b85, U+7ba2, U+7bc2, U+7c30, U+7c60, U+7ca1, U+7ca3, U+7ca9, U+7cba, U+7cc0, U+7d5b, U+7d96, U+7da0, U+7ddb, U+7de8, U+7e21, U+7e2b, U+7e3f, U+7e50, U+7f0a, U+7feb, U+8060, U+8074, U+8085, U+812d, U+8159, U+820a, U+8246, U+8248, U+8337, U+8345, U+83c9, U+83f5, U+8487, U+84be, U+84c7, U+84cf, U+84e0, U+84f0, U+84f4, U+8514, U+851f, U+855a, U+85b3, U+85db, U+8606, U+862d, U+866f, U+86a2, U+86e3, U+877f-8780, U+87ed, U+8883, U+889a, U+889e, U+88cf, U+890b, U+8927, U+892f, U+89aa, U+89d6, U+8a34, U+8a63, U+8b26, U+8b95, U+8b9a, U+8bac, U+8ca1, U+8cee, U+8d0f, U+8d20, U+8d57, U+8de1, U+8dfc, U+8e10, U+8e21, U+8e26, U+8e7e, U+8ec5, U+8ed3, U+8f3e, U+905d, U+9061, U+906f, U+9086, U+90cb, U+911c, U+9126, U+9142, U+9147, U+914e, U+9174, U+919c, U+91d9, U+9244-9245, U+924f, U+92b7, U+9306, U+930f, U+931e, U+938c, U+940f, U+9468, U+94b7, U+94e5, U+956e, U+9572, U+95a3, U+95b6, U+95c9, U+9613, U+961b, U+965e, U+9684, U+96ee, U+9749, U+9763, U+9779-977a, U+977f, U+97a8, U+97f0, U+97f2, U+9801, U+98d6, U+98e9, U+98ed, U+9916, U+99f0, U+9a3b, U+9a5f, U+9ae3, U+9af3, U+9b7e, U+9bd5, U+9c92, U+9caa, U+9caf, U+9d95, U+9dba, U+9dc3, U+9e02, U+9e6f, U+9e83, U+9e86, U+9e90, U+9e95, U+9e9a, U+9e9c, U+9ea8, U+9eb9, U+9f22, U+9f31, U+9f67, U+9f6e, U+9f78, U+9f7b;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.38.woff2) format('woff2');
+ unicode-range: U+5181, U+5e31, U+6224, U+6bf3, U+75b0, U+75c4, U+76e6, U+7744, U+7786, U+78bb, U+78dc, U+78e1, U+7904, U+79a3, U+79b1, U+79f1, U+7a94, U+7add, U+7b2d, U+7b4a, U+7b7c, U+7bc9, U+7bf0, U+7c8a, U+7c8f, U+7cf7, U+7d17, U+7d1b, U+7d2e, U+7d43, U+7d6b, U+7d7a, U+7d7f, U+7d88, U+7dbc, U+7dbf, U+7def, U+7e98, U+7f32, U+7fba, U+7fc9, U+7fec, U+8022, U+80f5, U+8126-8127, U+813a, U+816a, U+817d, U+81c7, U+81cb, U+81d0, U+81d3, U+81e2, U+8266, U+8296, U+82e0, U+82e7, U+831a, U+831d, U+8323, U+8344, U+83d2, U+83f4, U+844d, U+845e, U+846f, U+847b, U+8489, U+84e1, U+84ef, U+8523, U+8526, U+855d, U+85d9, U+85ec, U+8698, U+86da, U+86ef, U+870f, U+8714, U+8740, U+877a, U+8795, U+87a3, U+87d3, U+87fb, U+8836, U+88a5, U+88c0, U+894d, U+8972, U+8997, U+89dc, U+89fc, U+89ff, U+8a5d, U+8a65, U+8a67, U+8a69, U+8a7c, U+8aa5, U+8add, U+8ae5, U+8b31, U+8b5f, U+8b9e, U+8c40, U+8c8d, U+8ca8, U+8cc0, U+8cf2, U+8da7, U+8dc2, U+8dc9, U+8e18, U+8e27, U+8e77, U+8e8d, U+8ed2, U+8f0b, U+8f2a, U+8f8c, U+8f92, U+8fb5, U+8fbc, U+8fcf, U+9059, U+9085, U+9089, U+90de, U+90ea, U+9118, U+9120, U+9136, U+9141, U+917e, U+91a8, U+91b2, U+91c0, U+9207, U+920d, U+923e-923f, U+92ca, U+92fe, U+932b, U+934a, U+93d8, U+9407, U+9483, U+94de, U+94fb, U+94fd, U+9558, U+9597, U+95c0, U+95c4, U+96a4, U+96da, U+96df, U+9727, U+979a, U+97cc, U+97fa, U+980d-980e, U+9828, U+9835, U+984d, U+985d, U+986b-986c, U+98d4, U+9908, U+99a7, U+9a92, U+9aff, U+9b0b, U+9b8d, U+9bbc, U+9be1, U+9cb9, U+9ce3, U+9d03, U+9d23, U+9d26, U+9d3f, U+9d9d, U+9de3, U+9e80, U+9e89-9e8a, U+9ea3-9ea4, U+9eaf, U+9f08, U+9f36, U+9f4b, U+9f4f;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.39.woff2) format('woff2');
+ unicode-range: U+4f67, U+63ad, U+67c3, U+6bf9, U+6ca9, U+6cb2, U+7338, U+76dc-76dd, U+7739, U+7756, U+77dd, U+77f0, U+7859, U+78e5, U+78eb, U+794b, U+7966, U+796e, U+799c, U+79a0, U+79ab-79ac, U+7a02, U+7a1b, U+7ada, U+7af6, U+7b16, U+7b27, U+7baf, U+7bbe, U+7be4, U+7bf2, U+7c22, U+7c37, U+7c3b, U+7c4c, U+7c53, U+7c8d, U+7c90, U+7ca6, U+7cad, U+7ce2, U+7cf0, U+7cf5, U+7d03, U+7d16, U+7d29, U+7d35, U+7d59, U+7d8d, U+7e15, U+7e5f, U+7e68, U+7e7a, U+7e84, U+7f4b, U+7f77, U+7fc2, U+7fdc, U+8066, U+80ca, U+811d, U+8130, U+8136, U+81b0, U+81b2, U+8274, U+8283, U+82d8, U+82fd, U+830a, U+83bf, U+83c2, U+83c6, U+83eb, U+8466, U+849e, U+84de, U+84fa, U+8542, U+85a2, U+85a6, U+85be, U+85d7, U+85e0, U+85e7, U+85f7, U+879e, U+8806, U+883b, U+8880, U+8890, U+88b5, U+88ef, U+8931-8932, U+8935, U+8946, U+8971, U+8985, U+898d, U+8a0c, U+8a1b, U+8a2a, U+8a64, U+8a7f, U+8ac4, U+8b53, U+8b5c, U+8b8f, U+8c48, U+8c4e, U+8ce2, U+8cf9, U+8da6, U+8dc5, U+8dca, U+8e06, U+8e3a, U+8e54, U+8ec8, U+8ece, U+8ed0, U+8f6a, U+8ffa, U+9077, U+9087, U+9098, U+9124, U+9133, U+9166, U+91b0, U+91be, U+91db, U+9223, U+9231, U+9236, U+935b, U+9366, U+93cf, U+9435, U+9455, U+945f, U+94b6, U+94d4, U+9533, U+9564-9566, U+959b, U+95af, U+95ba-95bb, U+95d2, U+9659, U+9682, U+96b8, U+972e, U+9733, U+980c, U+9830, U+9846, U+9851, U+986a, U+988b, U+98bc, U+98fc, U+9905, U+9926, U+99d5, U+99dd, U+9a4c, U+9a58, U+9b81, U+9ba8, U+9c20, U+9c39, U+9c63, U+9c97, U+9cbc, U+9d28, U+9d2a, U+9d40, U+9d72, U+9d84, U+9d92, U+9d97, U+9d9c, U+9d9f, U+9de5, U+9de7, U+9df1-9df2, U+9df9, U+9e4d, U+9e53, U+9e96, U+9f44, U+9f4a;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.40.woff2) format('woff2');
+ unicode-range: U+74de, U+7706, U+7760, U+7790, U+77ab, U+77c5, U+77ca, U+77d8, U+77da, U+77e1, U+787d, U+7883, U+78ff, U+7908, U+791c, U+7983, U+79d4, U+79f2, U+7a7b, U+7aae, U+7ac4, U+7b17, U+7b87, U+7b98, U+7bbd, U+7c0d, U+7c1c, U+7c42, U+7c50, U+7cb7, U+7d4f, U+7d68, U+7d79, U+7d91, U+7dcc, U+7df7, U+7dfb, U+7e3e, U+7e49, U+7e59, U+7e95, U+7f41, U+7f85, U+7f87, U+7fd0, U+7fef, U+8008, U+800e, U+8063, U+8070, U+8119, U+811b, U+8137, U+813b-813c, U+8157, U+8195, U+81d8, U+81db, U+8250, U+825c, U+8277, U+82d9, U+839a, U+840a, U+8417, U+8458, U+8462, U+8479, U+84c2, U+8525, U+8532, U+858b, U+85cd, U+85d8, U+85dd, U+863f, U+86ec, U+86f7, U+8711, U+8781, U+879a, U+87a4, U+883e, U+8842, U+884b, U+8887, U+888c, U+8894, U+88a6, U+88a8, U+88bf, U+88f2, U+8982, U+8a03, U+8a0b, U+8a15, U+8a1d, U+8a60, U+8a6b-8a6c, U+8a6e, U+8a7b, U+8aa0, U+8ab3, U+8ac6, U+8b2c, U+8b43-8b44, U+8b6f, U+8b7d, U+8bb1, U+8cdc, U+8cf0, U+8d08, U+8dae, U+8e63, U+8e71, U+8ec3, U+8ed9, U+8ee0-8ee2, U+8f29, U+8f5d, U+8fad, U+905c, U+90c0, U+90c8, U+90f5, U+9127, U+912b, U+9137, U+913f-9140, U+91e1-91e2, U+9243, U+9250, U+92b6, U+92d0, U+92f8, U+9310, U+934d-934e, U+9367, U+937c, U+9396, U+93e6, U+9496, U+9575, U+95ad, U+95c3, U+95e2, U+9657, U+967c, U+976d, U+9797, U+97c8, U+97f1, U+9839, U+984e, U+9858, U+9873, U+9901, U+9903, U+9931, U+9935, U+9989, U+99ae, U+99b3, U+99db, U+9a0e, U+9a19, U+9a3a, U+9a4a, U+9a59, U+9aab, U+9ab3, U+9ab9, U+9ae0, U+9ae5, U+9bd9-9bda, U+9c1f, U+9c49, U+9cd2, U+9cdb, U+9d1f, U+9d2e, U+9d32, U+9d37, U+9da1, U+9df7, U+9e00, U+9e8e, U+9ea1, U+9ea7, U+9f30, U+9f92;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.41.woff2) format('woff2');
+ unicode-range: U+54f3, U+589a, U+5c7a, U+640c, U+64d7, U+6957, U+6f24, U+728f, U+76d5, U+76e9, U+76eb, U+76fb, U+7716, U+771c, U+7795, U+77b7, U+77c4, U+77ce, U+77d9, U+781b, U+782e, U+7848, U+78e6, U+790b, U+7928, U+7943, U+7972, U+797b, U+79a2, U+79a5, U+7a06, U+7a2d, U+7a8a, U+7a8c, U+7aaa, U+7abc, U+7acf, U+7b48, U+7b7b, U+7b7d, U+7bf4, U+7bfc, U+7c25, U+7c3c, U+7c44, U+7c46-7c47, U+7c72, U+7cf4, U+7d0f, U+7d7e, U+7d9f, U+7db5, U+7ddc, U+7de0, U+7e22, U+7e4c, U+7e51-7e52, U+7e91, U+7eb4, U+7f48, U+7f75, U+7fda, U+8025, U+8030, U+805c, U+8067, U+807a, U+80a3, U+80bb, U+80d1, U+80d4, U+80fe, U+810e, U+811c, U+8128, U+81bc, U+81ee, U+8223, U+8255, U+8264, U+8267, U+82f2, U+82fc, U+8356, U+836c, U+83bb, U+8483, U+84e8, U+84f5, U+84fe, U+854c, U+8580, U+85c7, U+85e6, U+8640, U+8656-8657, U+8670, U+8688, U+8696, U+86e1, U+86fb, U+870c, U+870e, U+8728, U+875d, U+8779, U+87ff, U+8814, U+8819, U+882d, U+8837, U+887c, U+8897, U+890f, U+8926, U+8939, U+896c, U+8976, U+8990, U+89fd, U+8a1f, U+8a6f, U+8ab4, U+8ad3, U+8b0f, U+8b27, U+8b2a, U+8b41, U+8ca4, U+8d6a, U+8dd8, U+8e16, U+8e2b, U+8e7d, U+8ec6, U+8ec9, U+8edb, U+8f08, U+8f34, U+911b, U+9121, U+9168, U+9191, U+9196, U+92fb, U+9351, U+93aa, U+93c2, U+93c9, U+93d5, U+9430, U+945b, U+95d5, U+96ca, U+97a6-97a7, U+97c2, U+9853, U+98c6, U+98d0, U+994f, U+99f3, U+99f9, U+9a3d, U+9a44, U+9a4e, U+9a8d, U+9afc, U+9b10-9b11, U+9b56, U+9b71, U+9b8b, U+9bb0, U+9bbe, U+9bcb, U+9bcf, U+9c37, U+9cbe, U+9cfe, U+9d10, U+9d27, U+9d3e, U+9d83, U+9dab, U+9db2, U+9ded, U+9e3c, U+9e50, U+9f07, U+9f1e, U+9f24, U+9f46, U+9f5b, U+9f7a, U+9f7d, U+9f91;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.42.woff2) format('woff2');
+ unicode-range: U+570a, U+5776, U+727f, U+76de, U+7705, U+7759, U+77b5, U+77df, U+7863, U+78c8, U+78da, U+78e9, U+78ed, U+78f3, U+78f9, U+7900, U+7931, U+797f, U+79ae, U+79f6, U+7a0c, U+7a43, U+7a6b, U+7a85, U+7a87, U+7abe, U+7af7, U+7b23, U+7b6d, U+7ba3, U+7bc3, U+7c03, U+7c2c, U+7c2f, U+7c3a, U+7c93, U+7cb4, U+7cb6, U+7ce6, U+7d0b, U+7d13, U+7d5e-7d5f, U+7d82, U+7df2, U+7df9-7dfa, U+7e29, U+7e37, U+7e3c, U+7e46, U+7e55, U+7e5a, U+7e73, U+7f37, U+7f4d, U+7fe3, U+805d, U+805f, U+808a, U+8099, U+809e, U+81a5, U+81b1, U+81b4, U+81de, U+81ff, U+824e, U+82b5, U+82c3, U+82f6, U+830d, U+83ed, U+8456, U+849f, U+8573, U+85e3, U+85eb, U+8648, U+8659, U+8692, U+8710, U+872a, U+8755, U+881c, U+8895, U+88cb, U+88d3, U+88e9, U+890c, U+890e, U+896b, U+8988, U+8993, U+89ed, U+8a05-8a06, U+8a0f, U+8a3d, U+8a5f, U+8a68, U+8a6d, U+8a75, U+8a95, U+8aa1, U+8b54, U+8b7b, U+8b88, U+8bc7, U+8c6d, U+8c8e, U+8c91, U+8cbf, U+8cc4, U+8d99, U+8dac, U+8db7, U+8df0-8df1, U+8e25, U+8e4c, U+8e79, U+8e98, U+8f16, U+8f47, U+8f4b, U+8f55, U+8f81, U+8fc6, U+8fd2, U+9015, U+9024, U+90d8, U+9183-9184, U+91bc, U+9230, U+9291, U+92cb, U+92eb, U+9332, U+9354, U+936e, U+9378, U+93c1, U+93e2, U+93e4, U+93ed, U+9404, U+9428, U+9444, U+9463, U+9477, U+947d, U+94f9, U+95da, U+9622, U+9624, U+9638, U+972b, U+978e, U+979d, U+97d7, U+981e, U+9837, U+9909, U+9964, U+99c3, U+99c9, U+9a1b, U+9a20, U+9a61, U+9aea, U+9b16, U+9b1a, U+9b3f, U+9b8c, U+9bc1, U+9bdb, U+9c24, U+9c7b, U+9ce0, U+9cf3, U+9d09, U+9d30, U+9d3c, U+9d42, U+9d9a, U+9da2, U+9db3, U+9dc7, U+9deb, U+9e56, U+9e85, U+9ec7, U+9ecb, U+9ee1, U+9f57, U+9f62-9f63;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.43.woff2) format('woff2');
+ unicode-range: U+5865, U+6f2d, U+76cc, U+76e8, U+76ec, U+76ff, U+770c, U+7782, U+78d1, U+7945, U+79a1, U+79ad, U+79f9, U+7a8e, U+7ba5, U+7c15, U+7c2b, U+7c9b, U+7cbb, U+7cf1, U+7e02, U+7e5e, U+7ee4, U+7f46, U+7f88, U+7fc6, U+7fd1, U+8075, U+8135, U+81c4, U+81d6, U+8322, U+833d, U+8358, U+838a, U+83a2, U+83b5, U+83d5, U+8435, U+84bb, U+84db, U+84f7-84f8, U+850a, U+8518, U+851e, U+8534, U+8558, U+857c, U+8594, U+85d6, U+85e2, U+85f6, U+8601, U+8691, U+86e2, U+87ef, U+8804, U+8808, U+880e, U+8823, U+8825, U+88db, U+896a, U+8999, U+89a5, U+8a11, U+8a23, U+8a52, U+8a70, U+8a78, U+8ab0, U+8acf, U+8adb, U+8aee, U+8af1, U+8b25, U+8b28, U+8b6b, U+8c8b, U+8c9b, U+8cab, U+8cb2, U+8cd3, U+8cde, U+8d01-8d02, U+8d09, U+8da4, U+8daf, U+8db6, U+8dd4, U+8e34, U+8e46, U+8ef7, U+8f1d, U+8f30, U+8f3f, U+8f42, U+9081, U+90bc, U+912e, U+91df-91e0, U+91e3, U+91f1, U+9209, U+9219, U+9234, U+923a, U+9242, U+9254, U+928a, U+9298, U+92a6, U+92c5, U+92e4, U+92ed, U+9303, U+9308, U+9323, U+9328, U+9364, U+938b, U+9394, U+93c6, U+93d0, U+93f1, U+93fb, U+9416, U+9427, U+9433, U+9440, U+9462, U+9471, U+947e, U+9491, U+9543, U+95ac, U+95be-95bf, U+965c-965d, U+96ba, U+9720, U+9724, U+9729, U+976e, U+978f, U+9796, U+97e8, U+97fc-97fd, U+9812, U+9824, U+983a, U+9854, U+985b, U+98f3, U+98f8, U+9906, U+991a, U+9928, U+9945, U+9948, U+995c, U+995f, U+99d0, U+99e1, U+99f7, U+9a01, U+9a2b, U+9a37, U+9a3c, U+9a62, U+9ad5, U+9af4, U+9b5c, U+9bc2, U+9bc5, U+9c2b, U+9c57, U+9c7d, U+9cac, U+9d13, U+9d3b, U+9d86, U+9d8a, U+9db8, U+9df3, U+9dff, U+9e01, U+9e34, U+9e9e, U+9eff, U+9f0a, U+9f0f, U+9f1c, U+9f2b, U+9f66;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.44.woff2) format('woff2');
+ unicode-range: U+51b1, U+57b2, U+5c1c, U+5ddb, U+75c3, U+76e0, U+76f3, U+76fd, U+7703, U+770f, U+772e, U+7745, U+774d, U+7755, U+7767, U+779c, U+7844, U+7894, U+78a0, U+78a6, U+78ad, U+78b8, U+78bd, U+78c3, U+78de, U+78f8, U+78fd, U+7909, U+7918, U+792e, U+793d, U+7958, U+797e, U+798c, U+79a4, U+79cc, U+79d9, U+79e2, U+7a27, U+7a2c, U+7a32, U+7a38, U+7a5c, U+7ad2, U+7b00, U+7b65, U+7b76, U+7bec-7bed, U+7c18, U+7c34, U+7c52, U+7c54, U+7c5c, U+7c5e, U+7c63, U+7c76, U+7cc2, U+7cc9, U+7d23, U+7d4d, U+7da1, U+7db6, U+7dc4, U+7dd7, U+7dfc, U+7e01, U+7e06, U+7e0b, U+7e1c, U+7e1e, U+7e40, U+7e43, U+7e64, U+7e67, U+7e6c, U+7e83, U+7e89, U+7e92, U+7e97, U+7f6f, U+7f80, U+7f95, U+7fb5, U+8007, U+8034, U+806b, U+808d, U+8117, U+8143, U+8163, U+8168, U+8175, U+8197, U+819f, U+81ef, U+8226, U+8241-8242, U+824a, U+831e, U+83c4, U+8468, U+847e, U+8484, U+8488, U+8495, U+8498, U+84a7, U+84ad, U+84c3, U+84c6, U+84f3, U+8531, U+8541, U+8582, U+85d1, U+85ef, U+8614, U+8618, U+8706, U+8791, U+87e8, U+87fc, U+882a, U+885f, U+8911, U+8920, U+8956, U+8987, U+8a10, U+8a14, U+8a56-8a57, U+8a6a, U+8a87, U+8ac8, U+8ad1, U+8b1f, U+8b8c, U+8b99, U+8c3d, U+8c57, U+8c77, U+8c97, U+8ca3, U+8cef, U+8d0b, U+8d72, U+8e28, U+8e89, U+8eb1, U+8f00, U+8f17, U+8f53, U+8f77, U+8fcb, U+9013, U+913a, U+9173, U+91b1, U+91d4, U+922a, U+929d, U+92d5, U+9373, U+939a, U+9410, U+9434, U+9475, U+96a9, U+96d1, U+9718, U+9784, U+97c6, U+98ba, U+98ee, U+98f0, U+9907, U+9950, U+99bb, U+99de, U+9a27, U+9afd, U+9b36, U+9b63, U+9bc0, U+9bf5-9bf6, U+9c27, U+9c30, U+9c42, U+9cc2, U+9ccb, U+9d1c, U+9d39, U+9d5f, U+9e52, U+9f2a, U+9f94;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.45.woff2) format('woff2');
+ unicode-range: U+578c, U+600a, U+76d3, U+7715, U+7723, U+774e, U+7758, U+7769, U+77a3, U+77c0, U+77c2, U+77f5, U+77fa, U+782a, U+7842, U+784a, U+7885, U+7892, U+78e3, U+78ea, U+7912, U+7964, U+7994, U+799e, U+79a9, U+79e0, U+7a11, U+7a44, U+7a50, U+7a59, U+7a5b, U+7a6f, U+7a71, U+7a75, U+7aaf, U+7ac2, U+7ae2, U+7b09, U+7b0d, U+7b69, U+7bdb, U+7bf3, U+7c11, U+7c20, U+7c83, U+7c96, U+7cd3, U+7cfa, U+7d2d, U+7d3e, U+7d6d, U+7d76, U+7d85, U+7dc5, U+7dcd, U+7e42, U+7e4b, U+7e63, U+7f47, U+7f59, U+7f65, U+7f7c, U+7f97, U+7f9c, U+7fed, U+8011, U+802e, U+8078, U+80b8, U+80f9, U+8123, U+816c, U+8184, U+8186, U+818b, U+81aa, U+81d5, U+8203, U+8252, U+826b, U+826d, U+8276, U+827c, U+833f, U+8362, U+8373, U+8382, U+841a, U+84d7, U+84f1, U+854b, U+855f, U+8583, U+8590, U+85a0, U+85fa, U+8613, U+862a, U+8675, U+86be, U+86d6, U+86dc, U+874d, U+8768, U+87c2, U+87dc, U+880f, U+8855, U+8858, U+889f, U+88ac, U+895b, U+8abe, U+8b45, U+8b4c, U+8b78, U+8b9c, U+8c3b, U+8c60, U+8cda, U+8d9d, U+8da1, U+8dfe, U+8e00, U+8e38, U+8e4e, U+8e61, U+8e73, U+8e9b, U+8ea9, U+8eb6, U+8ecf, U+8eec, U+8f35, U+8f57, U+8f65, U+8fa2, U+9037, U+9048, U+908c, U+911f, U+918e, U+91bb, U+91ed, U+9238, U+928c, U+92c2, U+92ce, U+9350, U+93b4, U+93b8, U+940d, U+9458, U+946e, U+9594, U+95cd, U+96cb, U+9723, U+9743, U+97cd, U+9833, U+98a9, U+98e6, U+9914, U+99cb, U+9a04, U+9a48, U+9aa9, U+9abb, U+9abe, U+9af2, U+9b19, U+9b3d, U+9b6b, U+9b73, U+9bc8, U+9be9, U+9bec, U+9c0c, U+9c6e, U+9c93, U+9d02, U+9d44, U+9d6c, U+9d8d, U+9da0, U+9dc1, U+9dd6, U+9e07, U+9e18, U+9e27, U+9e59, U+9e8f, U+9eb0, U+9eee, U+9f04-9f05, U+9f16, U+9f6f, U+9f93;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.46.woff2) format('woff2');
+ unicode-range: U+7640, U+76ea, U+7700, U+7732, U+774b, U+77c3, U+77d2, U+782b, U+785f, U+7880, U+78a9, U+78c4, U+7902, U+7907, U+790a, U+7959, U+7970, U+7973, U+7979, U+7990, U+79aa, U+79f3, U+79fc, U+7a04, U+7a07-7a08, U+7a18-7a19, U+7a62, U+7af8, U+7afe, U+7b10, U+7b1c, U+7b42, U+7b63, U+7b8f, U+7b92, U+7bdf, U+7bfa, U+7ca7, U+7ce7, U+7d02, U+7d10, U+7d33, U+7d3b, U+7d80, U+7db9, U+7dd0, U+7df1, U+7e08, U+7e56, U+7e6f, U+7e74, U+7e80, U+7f3e, U+7f89, U+7fad, U+7fb7, U+7fc8, U+800a, U+8021, U+8140, U+8142, U+81d7, U+81da, U+824d, U+8269, U+82c5, U+8381, U+83de, U+83f3, U+8408, U+844f, U+8481, U+8491, U+84d4-84d5, U+8519, U+853f, U+8563, U+8567, U+8586, U+8597, U+859d, U+85c0, U+860c, U+864b, U+86bf, U+872b, U+873d, U+8744, U+87a5, U+8805, U+881a, U+8878, U+88bd, U+88f6, U+88fa, U+8923, U+8938, U+89d3, U+8a45, U+8a47, U+8a50, U+8a5b, U+8abb, U+8abd, U+8ac2, U+8ae7, U+8b1a, U+8b21, U+8c67, U+8cae, U+8cc2, U+8ce1, U+8cf1, U+8d51, U+8d79, U+8d7d, U+8db9, U+8e03, U+8e5e, U+8e67, U+8ebb, U+8ebf, U+8f27, U+8f3b, U+8f3d, U+90df, U+910d, U+9111, U+917c, U+9181, U+9195, U+91a5, U+91e6, U+91ea, U+9215, U+9221, U+9235, U+9292, U+9299, U+92fa, U+9317, U+9325, U+9353, U+935f, U+938d, U+9398, U+93cd, U+93fd, U+93ff, U+940e, U+9424, U+9432, U+943f, U+944a, U+9527, U+958f, U+95a7, U+95db, U+969d, U+96a5-96a6, U+9744, U+9771, U+97aa, U+97ba, U+97bf, U+97df, U+9840, U+98b1, U+98c0, U+98e5, U+98ea, U+9912, U+9946, U+995d, U+99bf, U+9a07, U+9a66, U+9ac9, U+9acf, U+9b09, U+9b38, U+9b5b, U+9cf7, U+9d4b, U+9d4f, U+9d68, U+9d7c, U+9df5, U+9dfc, U+9e0d, U+9e13, U+9e16, U+9e60, U+9ef6, U+9f09, U+9f70;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.47.woff2) format('woff2');
+ unicode-range: U+7b9b, U+7b9e, U+7ba4, U+7bb7, U+7bb9, U+7bbf, U+7bdc, U+7c1e, U+7c24, U+7c28, U+7c39, U+7c3d, U+7c6c, U+7c94, U+7cb8, U+7d07, U+7d1d, U+7d3a, U+7d46, U+7d73, U+7d84, U+7d8a, U+7d8f, U+7d92, U+7d94, U+7d97, U+7db4, U+7ddd-7dde, U+7de6, U+7df0, U+7df6, U+7e23, U+7e39, U+7e5c-7e5d, U+7e69, U+7e8f, U+7f43, U+7f5d, U+7f70, U+7fb4, U+7fe2, U+8061, U+8079, U+807b, U+807e, U+8115, U+811f, U+8133, U+813d, U+813f, U+81c8, U+8251, U+8259, U+8262, U+82bb, U+833b, U+834a, U+83d0, U+83d3, U+83d9-83da, U+83e3, U+83e6, U+83e8, U+8454, U+8460, U+846e, U+8472, U+84d9, U+8501, U+855b-855c, U+8566, U+8575, U+8577, U+8596, U+85e8, U+85ee, U+85f0, U+85f3, U+85f5, U+8643, U+8658, U+865c-865d, U+86e5, U+86f6, U+8720, U+8778, U+8790, U+8796, U+87a1-87a2, U+87f3, U+880c-880d, U+8812, U+8817, U+881d, U+881f, U+8898, U+891c, U+8928, U+897e, U+898a, U+899a-899b, U+899f-89a0, U+89af, U+8a1c, U+8a21, U+8a2e, U+8a3c, U+8a77, U+8a7a, U+8ac9, U+8ad2, U+8ad8, U+8ae6, U+8afa, U+8b00, U+8b20, U+8b29, U+8b38, U+8b3d, U+8b8d, U+8b9b, U+8ca6, U+8cb8, U+8cbd, U+8cc5, U+8cca, U+8cf3, U+8cfa, U+8d00, U+8d04, U+8d0a, U+8d0c, U+8daa, U+8dc1, U+8dc8, U+8dd2, U+8e56, U+8ec0, U+8ec7, U+8ed4, U+8ed8, U+8ee3, U+8efb, U+8f12, U+8f25-8f26, U+8f5f, U+9007, U+9094, U+90a5, U+90ab, U+913d, U+9186, U+919e, U+91bd, U+91e5, U+9202, U+923d, U+924d, U+925b, U+9293, U+929c, U+92c7, U+92d2, U+92f0, U+92f7, U+9320, U+9326, U+93b2, U+93c8, U+93df, U+9411, U+942c, U+9472, U+9474, U+947f, U+957b, U+9591, U+95b0, U+95b3-95b4, U+95b9, U+95cc, U+95e1, U+966e, U+967b, U+9702, U+9775, U+978a, U+979b, U+97d3;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.48.woff2) format('woff2');
+ unicode-range: U+5c8d, U+72e8, U+771e, U+7749, U+7774, U+778f, U+77a1, U+780f, U+7824, U+78b5, U+78ef, U+7910-7911, U+7976, U+7996-7997, U+79b0, U+79b5, U+79c5, U+7a21, U+7a34, U+7a7d, U+7aa4, U+7ac8, U+7acc, U+7ae4, U+7b32, U+7b3f, U+7c59, U+7cb5, U+7cbf, U+7d18, U+7d52-7d53, U+7dcb, U+7e2a, U+7e8d, U+7ed7, U+7fa0, U+7fd6, U+7ff8, U+8076, U+80a7, U+81f6, U+820b, U+8263, U+82bc, U+836e, U+8422, U+844b, U+84e7, U+8504, U+8552, U+85ad, U+8672, U+86a1, U+8738, U+87a6, U+8829, U+89b5, U+8a39, U+8a3b, U+8a40, U+8a44, U+8aac, U+8ae0, U+8b57, U+8c4a, U+8cc1, U+8d8c, U+8db0, U+8e04, U+8ea6, U+8ee7, U+8f02, U+8f10, U+8f18, U+8f28, U+9076, U+908f, U+9206, U+9216, U+927c, U+9285, U+92ea, U+930b, U+9365, U+9387, U+939d, U+9429, U+9437, U+9470, U+95bd, U+95df, U+96a3, U+96b2, U+96d8, U+971d, U+979f, U+97bb, U+97ee, U+97f4, U+97f7, U+980a-980b, U+9813, U+981c, U+9855, U+9868, U+9874, U+98b5, U+98f7, U+98fa, U+98fe, U+9900, U+990c, U+9913, U+993c, U+994c, U+9952, U+9961, U+9973, U+997b, U+99b4, U+99dc, U+99e3, U+99e5, U+99e8, U+99f6, U+9a0d, U+9a23, U+9a30, U+9a3f, U+9a41-9a42, U+9a47, U+9a51, U+9a55-9a56, U+9a5b, U+9a65, U+9abf, U+9ade, U+9ae7, U+9b00, U+9b04-9b05, U+9b22, U+9b27, U+9b70, U+9b75, U+9b78, U+9b7a, U+9bca, U+9bd0, U+9bd3, U+9bd6-9bd8, U+9bfd, U+9c1e, U+9c2c, U+9c35, U+9c38, U+9c3b, U+9c4c, U+9c7a, U+9ce9-9cea, U+9cf6, U+9cff, U+9d22, U+9d2d, U+9d33-9d35, U+9d3a, U+9d3d, U+9d41, U+9d5d, U+9d88, U+9d90, U+9d93, U+9da9, U+9db4, U+9dd8, U+9de9, U+9df4, U+9dfd, U+9ea9, U+9eb5, U+9efa, U+9f11, U+9f18, U+9f25, U+9f2e, U+9f72, U+9f7c, U+9f8e, U+9f9d;
+}
+
+@font-face {
+ font-family: MI Lan Pro;
+ font-weight: 200;
+ font-display: swap;
+ src: url(https://cdn.cnbj1.fds.api.mi-img.com/xiaomi-font-service/Mi_Lan_Pro/200/8f9a512804601f0feff98ede5fb272a7.49.woff2) format('woff2');
+ unicode-range: U+76c9, U+76e2, U+7718, U+7771, U+777b, U+779e, U+78e0, U+7924, U+793f, U+7969, U+79a8, U+79fa, U+7a5f, U+7aab, U+7b0e, U+7b8b, U+7be8, U+7c4b, U+7cee, U+7d63, U+7de4, U+7df5, U+7e00, U+7e1a-7e1b, U+7e27, U+7e7f, U+7f99, U+7fae, U+80b0, U+8278, U+8359, U+8395, U+8399, U+8447, U+845f, U+84aa, U+8602, U+873c, U+8751, U+87a0, U+87a7, U+87c5, U+87e2, U+87e7, U+894c, U+8958, U+897d, U+8a1e, U+8b04, U+8c3c, U+8c70, U+8c92, U+8cf7, U+8e92, U+8ead, U+8fcd, U+91ff, U+927d, U+92ab, U+92b2, U+9327, U+935a, U+9371, U+93f8, U+946a, U+95a2, U+9777, U+9826, U+98bb, U+991f, U+992b, U+993d, U+9a0a, U+9a46, U+9a94, U+9aa3, U+9b33, U+9b52, U+9b7d, U+9b7f, U+9b85, U+9b87, U+9b8e, U+9b98, U+9baa, U+9bad, U+9be8, U+9c3f-9c40, U+9c44, U+9c53, U+9c96, U+9d12, U+9d19, U+9d1e, U+9d63, U+9d6a, U+9de6, U+9dfa, U+9f5c;
+}
diff --git a/components/counter/Counter.js b/components/counter/Counter.js
index c279aadba..2fd01653e 100644
--- a/components/counter/Counter.js
+++ b/components/counter/Counter.js
@@ -9,7 +9,7 @@ import Icon from '../icon'
* 加减器
*/
class Counter extends React.Component {
- static _Input = ''
+ static _Input = React.createRef()
static propTypes = {
value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
@@ -29,21 +29,27 @@ class Counter extends React.Component {
this.attrs = this.getAttrs(oldProps)
- const { value, defaultValue, min = -1 * Infinity, max = Infinity } = this.props
+ const {
+ value,
+ defaultValue,
+ min = -1 * Infinity,
+ max = Infinity
+ } = this.props
const finalValue = Math.min(
Math.max(Number(value === undefined ? defaultValue : value), Number(min)),
Number(max)
)
this.state = {
- value: this.format(finalValue),
+ value: this.formatValue(finalValue),
valueTrue: this.formatValue(finalValue)
}
}
componentWillReceiveProps (nextProps) {
if (this.props.hasOwnProperty('value')) {
+ this._Input.value = nextProps.value
this.setState({
- value: this.format(nextProps.value),
+ value: this.formatValue(nextProps.value),
valueTrue: this.formatValue(nextProps.value)
})
}
@@ -55,7 +61,16 @@ class Counter extends React.Component {
*/
getAttrs (oldProps) {
const attrs = {}
- const noNeed = ['value', 'className', 'class', 'id', 'style', 'type', 'placeholder', 'disabled']
+ const noNeed = [
+ 'value',
+ 'className',
+ 'class',
+ 'id',
+ 'style',
+ 'type',
+ 'placeholder',
+ 'disabled'
+ ]
for (let i in oldProps) {
if (!(oldProps[i] instanceof Function)) {
@@ -68,21 +83,17 @@ class Counter extends React.Component {
return attrs
}
- /**
- * 净化数据
- * @param {string} val 值
- */
- formatValue (value) {
- return isNaN(Number(value)) ? value.toString().replace(/[^-\d]/g, '') : value
- }
-
/**
* 格式化数据
- * 88,888
* @param {string} val 值
*/
- format (val) {
- return val
+ formatValue (val) {
+ const { min } = this.props
+ let _val = Number(val)
+ if (Number.isNaN(Number(_val))) {
+ _val = min && min > 0 ? min : 0
+ }
+ return _val
}
render () {
@@ -90,7 +101,13 @@ class Counter extends React.Component {
const { min = -1 * Infinity, max = Infinity, step, theme } = this.props
let { valueTrue } = this.state
const { defaultValue, ...attrs } = this.attrs
- const filterAttrs = filterObjProps(attrs, ['locale', 'theme', 'localeDatas', 'localedatas', 'innerRef'])
+ const filterAttrs = filterObjProps(attrs, [
+ 'locale',
+ 'theme',
+ 'localeDatas',
+ 'localedatas',
+ 'innerRef'
+ ])
let isAddDisabled = false
let isMinusDisabled = false
@@ -106,9 +123,13 @@ class Counter extends React.Component {
{
- let value = new Decimal(this.getInputNumber()).minus(step).valueOf()
+ let value = new Decimal(this.getInputNumber())
+ .minus(step)
+ .valueOf()
if (isMinusDisabled) {
return
}
@@ -139,7 +160,7 @@ class Counter extends React.Component {
e.persist()
let value = e.target.value
this.setState({
- value: this.format(value),
+ value: this.formatValue(value),
valueTrue: this.formatValue(value)
})
}}
@@ -150,7 +171,9 @@ class Counter extends React.Component {
}}
/>
{
let value = new Decimal(valueTrue).plus(step).valueOf()
if (isAddDisabled) {
@@ -177,37 +200,26 @@ class Counter extends React.Component {
update (value) {
const { onChange } = this.props
-
- if (this.isControlledComponent) {
- this.setState({
- value: this.format(this.props.value),
- valueTrue: this.formatValue(this.props.value)
- })
- }
-
- if (this.isUncontrolledComponent) {
- this.setState({
- value: this.format(value),
- valueTrue: this.formatValue(value)
- })
+ let _value = value
+ if (this.props.hasOwnProperty('value')) {
+ _value = this.props.value
}
- setTimeout(() => {
- onChange &&
- onChange(
- {
- target: this._Input
- },
- value
- )
- }, 0)
- }
- get isControlledComponent () {
- return this.props.hasOwnProperty('value')
- }
-
- get isUncontrolledComponent () {
- return !this.isControlledComponent
+ this.setState(
+ {
+ value: this.formatValue(_value),
+ valueTrue: this.formatValue(_value)
+ },
+ () => {
+ onChange &&
+ onChange(
+ {
+ target: this._Input
+ },
+ this.formatValue(value)
+ )
+ }
+ )
}
getInputNumber () {
@@ -222,19 +234,23 @@ class Counter extends React.Component {
}
get valueTrue () {
- return parseFloat(this.state.value.toString().replace(/[^0-9|.|\-(e+)]+/, ''))
+ return parseFloat(
+ this.state.value.toString().replace(/[^0-9|.|\-(e+)]+/, '')
+ )
}
get willReachMax () {
const { max = Infinity, step } = this.props
- let num = new Decimal(this.valueTrue).plus(step > 0 ? step : -step).valueOf() * 1
+ let num =
+ new Decimal(this.valueTrue).plus(step > 0 ? step : -step).valueOf() * 1
return max <= num
}
get willReachMin () {
const { min = -1 * Infinity, step } = this.props
- let num = new Decimal(this.valueTrue).minus(step > 0 ? step : -step).valueOf() * 1
+ let num =
+ new Decimal(this.valueTrue).minus(step > 0 ? step : -step).valueOf() * 1
return min >= num
}
diff --git a/components/counter/index.d.ts b/components/counter/index.d.ts
new file mode 100644
index 000000000..0b22e0848
--- /dev/null
+++ b/components/counter/index.d.ts
@@ -0,0 +1,11 @@
+interface ButtonProps {
+ value?: number
+ defaultValue?: number
+ step?: number
+ min?: number
+ max?: number
+ disabled?: boolean
+ onChange?: (e: ChangeEvent) => void
+}
+declare const Counter: React.ComponentType
+export default Counter
diff --git a/components/counter/index.js b/components/counter/index.js
index 5f5b7f45d..85820ea61 100644
--- a/components/counter/index.js
+++ b/components/counter/index.js
@@ -1,6 +1,11 @@
+import React from 'react'
import Counter from './Counter'
import './style/index'
-import SwitchVersion from '../_util/SwitchVersion'
import CounterLegacy from './counter-legacy'
-export default SwitchVersion(Counter, CounterLegacy)
+const CounterWrapper = ({ legacy, ...props }) => {
+ const WrapperComponent = legacy ? CounterLegacy : Counter
+ return
- {this.initPanel(this.state, this.props)}
-
- ) : null
- }
-
- )
- }
-}
-BasePicker.propTypes = {
- type: PropTypes.oneOf(Object.values(DatePickerType)),
- value: function (props, propName, componentName) {
- const val = props[propName]
- if (val === undefined || val === null) {
- return null
- }
- if (!val) {
- return null
- }
- if (val.start && val.end) {
- const _start = isValid(val.start)
- const _end = isValid(val.end)
- if (!_start || !_end) {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed. start or end is an invalid date.`)
- }
- } else {
- if (!isValid(val)) {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed. value is an invalid data.`)
- }
- }
- },
- onChange: PropTypes.func,
- format: PropTypes.string,
- showTime: PropTypes.bool,
- disabled: PropTypes.bool,
- showWeekNumber: PropTypes.bool,
- weekOffset: PropTypes.oneOf([0, 1]),
- timeInterval: function (props, propName, componentName) {
- const val = props[propName]
- if (val < 5 || val > 480 || (val > 60 && val % 60 !== 0) || (val < 60 && 60 % val !== 0)) {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. This value must be greater than 5 and less than 480 and is a multiple of 60.`)
- }
- },
- clearable: PropTypes.bool
-}
-BasePicker.defaultProps = {
- type: 'date',
- disabled: false,
- showWeekNumber: true,
- weekOffset: 0,
- timeInterval: 240,
- clearable: true
-}
-export default BasePicker
diff --git a/components/date-picker/BasePicker.jsx b/components/date-picker/BasePicker.jsx
new file mode 100644
index 000000000..e64137a85
--- /dev/null
+++ b/components/date-picker/BasePicker.jsx
@@ -0,0 +1,199 @@
+import React, { useState, useRef, useCallback } from 'react'
+import moment from 'moment'
+import DPContext from './context'
+import Provider from '../context/index'
+import { useDate, useFormat, useAltData } from './hooks'
+import { getInRangeDate } from './utils'
+import _ from 'lodash'
+import classNames from 'classnames'
+import Popper from '../popper/index'
+import Panel from './components/Panel'
+import RangePanel from './components/RangePanel'
+import Root from './components/Root'
+
+import './style/index'
+
+const BasePicker = ({
+ type = 'date',
+ value,
+ defaultValue,
+ placeholder,
+ showTime = false,
+ format,
+ disabled,
+ clearable = true,
+ width = 'auto',
+ weekOffset = 0,
+ min = null,
+ max = null,
+ hourStep,
+ minuteStep,
+ secondStep,
+ onChange = () => {},
+ timeInterval = 240,
+ shortcuts,
+ altCalendar,
+ altCalendarPreset,
+ dateMarkRender,
+ dateMarkPreset,
+ localeDatas,
+ overlayClassName,
+ theme,
+ placement = 'top-bottom-start',
+ inputReadOnly,
+ locale,
+ ...otherPorps
+}) => {
+ const cacheDate = useRef(null)
+ const [inputFocus, setInputFocus] = useState(false)
+ const [outDate, changeOutDate] = useDate({
+ value,
+ type,
+ defaultValue,
+ cacheDate
+ })
+ const [iFormat] = useFormat({
+ type,
+ showTime,
+ format,
+ locale
+ })
+ const isLarge = altCalendar || altCalendarPreset || dateMarkRender || dateMarkPreset
+ const [altCalendarPresetData, dateMarkPresetData] = useAltData({
+ altCalendar,
+ altCalendarPreset,
+ dateMarkRender,
+ dateMarkPreset
+ })
+ const [showPanel, setShowPanel] = useState(false)
+ const inputChangeEvent = (val, dir) => {
+ if (val.isValid()) {
+ const oData = _.cloneDeep(outDate)
+ oData[dir] = val
+ changeOutDate(oData)
+ }
+ }
+
+ const callback = (dates) => {
+ const _dates = _.cloneDeep(dates)
+ let returnDate = {}
+ let returnDateStr = ''
+ if (type.includes('range') || type === 'timeperiod' || type === 'week') {
+ returnDate = {
+ start: _dates[0].toDate(),
+ end: _dates[1].toDate()
+ }
+ returnDateStr =
+ type === 'week'
+ ? _dates[0].format(iFormat)
+ : { start: _dates[0].format(iFormat), end: _dates[1].format(iFormat) }
+ } else {
+ returnDate = _dates[0].toDate()
+ returnDateStr = _dates[0].format(iFormat)
+ }
+ cacheDate.current = _dates
+ onChange(returnDate, returnDateStr)
+ }
+ const onPick = (dates, isShowPanel) => {
+ !value && changeOutDate([].concat(dates))
+ setTimeout(() => {
+ setShowPanel(isShowPanel)
+ }, 0)
+ if (!isShowPanel) {
+ setInputFocus(false)
+ callback(dates)
+ }
+ }
+
+ const clickOutsideEvent = useCallback(() => {
+ const outDateValue = outDate[0]
+ const isValid = moment(outDateValue).isValid()
+ const { startDate, endDate } = isValid && getInRangeDate(outDate[0], outDate[1], max, min)
+ const _outDate = isValid ? [moment(startDate), moment(endDate)] : [null]
+ changeOutDate(_outDate)
+ resetStatus()
+ _outDate.forEach((od, index) => {
+ if (od && !od.isSame(cacheDate.current[index])) {
+ callback(_outDate)
+ }
+ })
+ }, [outDate])
+ const onClear = () => {
+ resetStatus()
+ changeOutDate([])
+ onChange(null, '')
+ }
+ const resetStatus = useCallback(() => {
+ setShowPanel(false)
+ setInputFocus(false)
+ }, [])
+ const popperCls = classNames(
+ 'hi-datepicker__popper',
+ type === 'date' && showTime && 'hi-datepicker__popper--time',
+ type.includes('range') && 'hi-datepicker__popper--range',
+ type === 'timeperiod' && 'hi-datepicker__popper--timeperiod',
+ shortcuts && 'hi-datepicker__popper--shortcuts',
+ isLarge && 'hi-datepicker__popper--large'
+ )
+
+ return (
+
+ {
+ setShowPanel(true)
+ setInputFocus(true)
+ }}
+ >
+
+ {type.includes('range') || type === 'timeperiod' ?
+
+
+ )
+}
+export default Provider(BasePicker)
diff --git a/components/date-picker/Calender.js b/components/date-picker/Calender.js
deleted file mode 100644
index 93fec67c9..000000000
--- a/components/date-picker/Calender.js
+++ /dev/null
@@ -1,493 +0,0 @@
-import React, {Component} from 'react'
-import { CSSTransition } from 'react-transition-group'
-import { deconstructDate, getYearWeek, showLargeCalendar } from './util'
-import Provider from '../context'
-import Lunar from './toLunar'
-import {DAY_MILLISECONDS} from './constants'
-
-import {
- getDaysInMonth,
- subMonths,
- getDay,
- startOfMonth,
- isWithinInterval,
- isSameDay,
- compareAsc,
- addMonths,
- isToday,
- getYear,
- getMonth,
- toDate,
- isValid
-} from './dateUtil'
-
-class Calender extends Component {
- constructor (props) {
- super(props)
- this.state = {
- rows: [[], [], [], [], [], []],
- show: false
- }
- this.weekNum = 0
- this.months = props.localeDatas.datePicker.month
- }
-
- _getTime (week, y, m) {
- const r = new Date(y, m - 1, 1)
- const t = r.getTime() - week * DAY_MILLISECONDS
- return t
- }
-
- getRows () {
- let {type, range, date, minDate, maxDate, weekOffset, disabledDate} = this.props
- let _date = date
- let {year, month, week} = deconstructDate(_date, weekOffset)
- let {endDate, startDate} = range || {startDate: null, endDate: null}
- // * dayCount: 当月天数
- // * lastMonthDayCount: 上月总天数
- // * firstDayWeek: 当月第一天是周几
- let firstDayWeek = getDay(startOfMonth(_date)) - weekOffset
- if (firstDayWeek <= 0) { // 如果为0 代表该月第一天是周日，在日历上需要第二行开始显示
- firstDayWeek = 7
- }
- const startTimeByCurrentPanel = this._getTime(firstDayWeek, year, month)// 当前日期面板中第一个日期的具体毫秒数(指向上一个月)
- const dayCount = getDaysInMonth(_date)
-
- let lastMonthDayCount = getDaysInMonth(subMonths(_date, 1)) // 上月总天数
- const {rows} = this.state
- let count = 0
- for (let i = 0; i < 6; i++) {
- let row = rows[i]
- for (let j = 0; j < 7; j++) {
- let col = row[j] || (row[j] = {type: 'normal', range: false, rangeStart: false, rangeEnd: false})
- col.type = 'normal'
- const currentTime = startTimeByCurrentPanel + DAY_MILLISECONDS * (i * 7 + j) // 当前日期的毫秒数
- if (i === 0) { // 处理第一行的日期数据
- if (j >= firstDayWeek) { // 本月
- col.value = ++count
- } else { // 上月
- col.value = lastMonthDayCount - firstDayWeek + j + 1
- col.type = 'prev'
- }
- } else {
- ++count
- if (count <= dayCount) { // 本月
- col.value = count
- } else { // 下月
- col.value = count - dayCount
- col.type = 'next'
- }
- }
- if (isToday(currentTime) && (col.type !== 'next' && col.type !== 'prev')) {
- col.type = 'today'
- }
- if (isSameDay(_date, currentTime) && !range && type !== 'week') {
- col.type = 'current'
- }
- if (type === 'daterange' || type === 'weekrange') {
- const sv = isValid(startDate)
- const ev = isValid(endDate)
- if (sv) {
- col.rangeStart = startDate && isSameDay(currentTime, startDate)
- }
- if (ev) {
- col.rangeEnd = endDate && isSameDay(currentTime, endDate)
- }
- if (sv && ev) {
- const _ds = [startDate, endDate].sort(compareAsc)
- col.range = endDate && isWithinInterval(toDate(currentTime), {start: _ds[0], end: _ds[1]})
- }
- row.weekNum = getYearWeek(new Date(currentTime), weekOffset).weekNum
- }
- col.disabled = (minDate && compareAsc(currentTime, toDate(minDate).setHours(0, 0, 0, 0)) === -1) || (maxDate && compareAsc(currentTime, toDate(maxDate).setHours(0, 0, 0, 0)) === 1) || (disabledDate && disabledDate(currentTime))
- }
- if (type === 'week') {
- let _month = month
- let _year = year
- if (row[1].type === 'prev') {
- _month -= 1
- if (_month <= 0) {
- _year -= 1
- _month = 12
- }
- }
- if (row[1].type === 'next') {
- _month += 1
- if (_month >= 12) {
- _year += 1
- _month = 1
- }
- }
- const cw = getYearWeek(new Date(_year, _month - 1, row[1].value), weekOffset).weekNum
- let bol = cw === week
- row.forEach(col => {
- col.range = bol
- })
- row[0].rangeStart = bol
- row[6].rangeEnd = bol
- row.currentWeek = bol
- row.weekNum = cw
- }
- }
- return rows
- }
- _getClassName (ele) {
- if (!ele) return
- if (ele.nodeName !== 'TD') {
- return this._getClassName(ele.parentNode)
- } else {
- return ele.className
- }
- }
- handlerClick (e) {
- const {onPick, date, type, range} = this.props
- let { year, month, day, hours, minutes, seconds } = deconstructDate(date)
-
- const td = e.target
-
- const cls = this._getClassName(td)
- const value = td.getAttribute('value')
- if ((td.nodeName !== 'SPAN' && td.nodeName !== 'TD' && td.nodeName !== 'DIV') || td.disabled) return false
- if (cls.indexOf('disabled') !== -1) return false
- const clickVal = parseInt(value)
- let newDate = new Date(year, month - 1, day, hours, minutes, seconds)
- if (type === 'year' || type === 'yearrange') {
- year = parseInt(value)
- newDate.setFullYear(year)
- } else if (type === 'month' || type === 'monthrange') {
- month = parseInt(value)
- newDate.setMonth(month - 1)
- }
- if (cls.indexOf('prev') !== -1) {
- newDate = addMonths(newDate, -1)
- }
- if (cls.indexOf('next') !== -1) {
- newDate = addMonths(newDate, 1)
- }
-
- if (!(type === 'year' || type === 'month' || type === 'yearrange' || type === 'monthrange')) {
- newDate.setDate(clickVal)
- }
- if (type === 'daterange' || type === 'weekrange' || type === 'yearrange' || type === 'monthrange') {
- if (range.selecting) {
- if (range.startDate > newDate) {
- range.selecting = false
- onPick(newDate, range.startDate)
- } else {
- range.selecting = false
- onPick(range.startDate, newDate)
- }
- } else {
- range.selecting = true
- onPick(newDate, null)
- }
- } else {
- onPick(newDate)
- }
- }
- handlerMouseMove (e) {
- let td = e.target
- const {mouseMove, date, type, range} = this.props
- let {year, month} = deconstructDate(date)
- if (td.nodeName !== 'SPAN' || td.disabled || type.indexOf('range') === -1 || !range.selecting) return false
- td = td.parentNode.parentNode
- const day = parseInt(td.textContent)
- const cls = td.className
- let newDate = new Date(year, month - 1, day)
- if (cls.indexOf('prev') !== -1) {
- newDate = addMonths(newDate, -1)
- }
- if (cls.indexOf('next') !== -1) {
- newDate = addMonths(newDate, 1)
- }
- if (type === 'yearrange') {
- newDate = new Date(day + '')
- }
- if (type === 'monthrange') {
- newDate = new Date(year, this.months.indexOf(td.textContent))
- }
- mouseMove(newDate)
- }
- getMarkNode (node) {
- return (
-
- {node}
-
- )
- }
- /**
- * 获取完整时间
- * @param {*} value 日
- * @param {*} cls className
- */
- getFullTime (value, cls) {
- const {
- date,
- type,
- altCalendarPreset,
- altCalendar,
- dateMarkRender,
- altCalendarPresetData,
- dateMarkPresetData
- } = this.props
-
- let { year, month, day, hours, minutes, seconds } = deconstructDate(date)
-
- if (cls.indexOf('disabled') !== -1) return false
- const clickVal = parseInt(value)
- let newDate = new Date(year, month - 1, day, hours, minutes, seconds)
- if (type === 'year') {
- year = parseInt(value)
- newDate.setFullYear(year)
- } else if (type === 'month') {
- month = parseInt(value)
- newDate.setMonth(month - 1)
- } else {
- newDate.setDate(clickVal)
- }
- if (cls.indexOf('prev') !== -1) {
- newDate = addMonths(newDate, -1)
- }
- if (cls.indexOf('next') !== -1) {
- newDate = addMonths(newDate, 1)
- }
- const _year = getYear(newDate)
- const _month = getMonth(newDate) + 1
- const _value = type === 'year' ? 1 : value
- const datainfo = _year + '/' + _month + '/' + _value
- const LunarInfo = Lunar.toLunar(_year, _month, _value)
- let lunarcellinfo = {
- text: altCalendarPreset === 'zh-CN' ? LunarInfo[6] : null, // 默认预置信息
- highlight: false
- }
- if (altCalendar || dateMarkRender) {
- lunarcellinfo = {
- text: this.altCalendarText(datainfo, lunarcellinfo),
- highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
- nodeMark: this.markRender(datainfo)
- }
- }
- if ((dateMarkPresetData && dateMarkPresetData[datainfo]) || (altCalendarPresetData && altCalendarPresetData[datainfo])) {
- lunarcellinfo = {
- text: this.altCalendarText(datainfo, lunarcellinfo),
- highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
- nodeMark: this.markRender(datainfo)
- }
- }
- return {...altCalendarPresetData[datainfo], ...lunarcellinfo}
- }
- showHolidayTimeId = null
- showHolidayDetail = (fullTimeInfo) => {
- clearTimeout(this.showHolidayTimeId)
- this.setState({
- show: true,
- holidayFullName: fullTimeInfo.FullText || fullTimeInfo.text
- })
- this.showHolidayTimeId = setTimeout(() => {
- this.setState({
- show: false
- })
- }, 2000)
- }
- altCalendarText = (datainfo, lunarcellinfo) => {
- const {altCalendarPresetData} = this.props
- if (altCalendarPresetData && altCalendarPresetData[datainfo]) {
- return altCalendarPresetData[datainfo].text || altCalendarPresetData[datainfo]
- }
- return lunarcellinfo.text
- }
- markRender (datainfo) {
- // 存在传入自定就优先使用自定义
- const {dateMarkRender, dateMarkPresetData} = this.props
- const markRenderNode = dateMarkRender ? dateMarkRender(new Date(datainfo).getTime(), new Date().getTime()) : false
- if (markRenderNode) {
- return this.getMarkNode(markRenderNode)
- }
- if (dateMarkPresetData) {
- return dateMarkPresetData[datainfo]
- }
- return null
- }
- altCalendar = (td) => {
- const { type: layerType, date, altCalendarPresetData, dateMarkPresetData, altCalendarPreset } = this.props
- const nDate = getYear(new Date())
- const propDate = getYear(date)
- const isAddToday = nDate === propDate
- let _class = []
-
- switch (td.type) {
- case 'normal':
- _class.push('normal')
- break
- case 'today':
- layerType !== 'week' && _class.push('today')
- layerType === 'month' && !isAddToday && _class.pop()
- break
- case 'current':
- _class.push('current')
- break
- default:
- _class.push(td.type)
- break
- }
- if ((altCalendarPresetData || dateMarkPresetData) && layerType !== 'year' && layerType !== 'month') {
- const fullTimeInfo = this.getFullTime(td.value, _class)
- return (
-
- {
- fullTimeInfo.nodeMark ? fullTimeInfo.nodeMark : null
- }
- {
- fullTimeInfo.text
- ?
- )
- } else {
- return null
- }
- }
- getTDClass (td, _index) {
- const { type: layerType, date } = this.props
- let _class = ['hi-datepicker__cell']
- if (showLargeCalendar(this.props)) {
- _class.push('hi-datepicker__cell--large')
- _index === 6 && _class.push('hi-datepicker__cell--large--laster')
- }
- if (td.disabled) {
- _class.push('disabled')
- return _class.join(' ')
- }
- const nDate = getYear(new Date())
- const propDate = getYear(date)
- const isAddToday = nDate === propDate
- switch (td.type) {
- case 'normal':
- _class.push('normal')
- break
- case 'today':
- layerType !== 'week' && _class.push('today')
- layerType === 'month' && !isAddToday && _class.pop()
- break
- case 'current':
- _class.push('current')
- break
- default:
- _class.push(td.type)
- break
- }
- (td.range && _class.push('in-range'))
- if (td.rangeStart || td.rangeEnd) {
- _class.push('range-se')
- }
- return _class.join(' ')
- }
- getWeeks () {
- const {weekOffset, localeDatas} = this.props
- const week = localeDatas.datePicker.week
-
- return week.slice(weekOffset).concat(week.slice(0, weekOffset))
- }
-
- TRMouseOver (num) {
- const {type} = this.props
- if ((type === 'week' || type === 'weekrange') && this.weekNum !== num) {
- this.weekNum = num
- }
- }
- render () {
- const { type, data } = this.props
- const { show, holidayFullName } = this.state
- const rows = data || this.getRows()
- return (
-
{
- this.setState({ isFocus: true })
- }}
- onMouseLeave={() => {
- this.setState({ isFocus: false })
- }}
- >
- {this._input(this.state.texts[0], 'input', this.state.leftPlaceholder)}
- {localeDatas.datePicker.to}
- {this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder)}
- {this._icon()}
-
- )
- }
- renderNormalInput () {
- const {
- disabled,
- showTime,
- type,
- width,
- theme
- } = this.props
- const {isFocus} = this.state
-
- const _cls = classNames(
- 'hi-datepicker__input',
- `theme__${theme}`,
- isFocus && 'hi-datepicker__input--focus',
- `hi-datepicker__input--${type}`,
- disabled && 'hi-datepicker__input--disabled',
- showTime && 'hi-datepicker__input--middle'
- )
- return (
- {
- this.setState({ isFocus: true })
- }}
- onMouseLeave={() => {
- this.setState({ isFocus: false })
- }}
- >
- {this._input(
- this.state.texts[0],
- 'input',
- this.state.leftPlaceholder
- )}
- {this._icon()}
-
- )
- }
- render () {
- const {type, showTime, width} = this.props
- return (
-
- {
- (type.indexOf('range') !== -1 || type === 'timeperiod') ? this.renderRangeInput() : this.renderNormalInput()
- }
- {
- this.state.showPanel ? (
- {
- altCalendarPreset === 'id-ID' && this.showHolidayDetail(fullTimeInfo)
- }}
- >
- {
- fullTimeInfo.highlight
- ?
- {fullTimeInfo.text}
-
- :
- {fullTimeInfo.text}
-
- }
-
: null
- }
-
-
-
-
-
- {
- (type.indexOf('date') !== -1 || type.indexOf('week') !== -1 || type.indexOf('timeperiod') !== -1) && (
-
-
-
- )
- }
-}
-
-Calender.defaultProps = {
- weekOffset: 0
-}
-export default Provider(Calender)
diff --git a/components/date-picker/DatePanel.js b/components/date-picker/DatePanel.js
deleted file mode 100644
index 05e425441..000000000
--- a/components/date-picker/DatePanel.js
+++ /dev/null
@@ -1,339 +0,0 @@
-import React, { Component } from 'react'
-import Calender from './Calender'
-import { deconstructDate, showLargeCalendar, colDisabled } from './util'
-import TimePanel from './TimePanel'
-import Icon from '../icon'
-import classNames from 'classnames'
-import TimePeriodPanel from './TimePeriodPanel'
-import { dateFormat, parseISO, getStartDate, addMonths, subMonths, startOfWeek, endOfWeek, getValidDate } from './dateUtil'
-
-class DatePanel extends Component {
- constructor (props) {
- super(props)
-
- this.state = {
- currentView: props.type,
- yearData: [],
- monthData: [],
- staticDate: getStartDate(props.date)
- }
- }
- /**
- * 改变月份事件
- * @param {Number} num 加减值
- */
- changeMonth (flag) {
- let {staticDate} = this.state
- let cDate = getValidDate(staticDate)
- if (flag) {
- cDate = subMonths(cDate, 1)
- } else {
- cDate = addMonths(cDate, 1)
- }
- this.setState({
- staticDate: cDate
- })
- }
-
- /**
- * 改变年份事件
- * @param {Number} num 加减值
- */
-
- changeYear (flag) {
- let { currentView } = this.state
- let {staticDate} = this.state
- const cDate = getValidDate(staticDate)
- let { year } = deconstructDate(cDate)
- const num = currentView === 'year' ? 10 : 1
- if (flag) {
- year -= num
- } else {
- year += num
- }
- cDate.setFullYear(year)
- this.setState({
- staticDate: cDate
- })
- }
-
- getYearOrMonthData (val, type, _year) {
- const start = type === 'year' ? val - 4 : 1
- let trs = [[], [], [], []]
- let num = 0
- const currentYear = new Date().getFullYear()
- const currentMonth = new Date().getMonth()
- for (let i = 0; i < 4; i++) {
- let row = trs[i]
- for (let j = 0; j < 3; j++) {
- let col = row[j] || (row[j] = { type: 'normal' })
- const y = start + num
- if (y === currentYear || y === currentMonth + 1) {
- col.type = 'today'
- }
- if (y === val) {
- col.type = 'current'
- }
-
- col = colDisabled(type, col, _year, this.props, y)
- col.value = y
- num++
- }
- }
- return trs
- }
- /**
- * Header 中间部分内容
- * @param {String} type 选择器类型
- * @param {Number} year 当前年份
- * @param {Number} month 当前月份
- */
- getHeaderCenterContent () {
- const { localeDatas, locale } = this.props
- const { staticDate, currentView } = this.state
- const { year, month } = deconstructDate(getValidDate(staticDate))
- if (currentView === 'year') {
- return year - 4 + '~' + (year + 7)
- }
- if (currentView === 'month') {
- return year
- }
- let arr = [localeDatas.datePicker.monthShort[month - 1]]
- if (locale === 'zh-CN') {
- arr.unshift(year + '年 ')
- } else {
- arr.push(` ${year}`)
- }
- return arr
- }
- /**
- * 渲染 Header 部分（包含箭头快捷操作）
- * @param {Object} args {
- * year: 当前年份
- * month: 当前月份
- * type: 选择器类型
- * num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
- * }
- */
- renderHeader (type) {
- return (
-
-
- {holidayFullName}
- | {item} | - }) - } -
|---|
|
-
-
-
-
- {cell.text || cell.value}
-
-
- {
- showLargeCalendar(this.props) && this.altCalendar(cell)
- }
- |
- )
- })
- }
-
-
- )
- }
-
- yearPick (date) {
- const { type, onPick } = this.props
- if (type === 'year') {
- onPick(date)
- } else {
- this.setState({
- currentView: 'month',
- staticDate: date
- })
- }
- }
- monthPick (_date) {
- const { type, onPick } = this.props
- const { currentView } = this.state
- if (type === 'month') {
- onPick(_date)
- } else if (type === 'week') {
- this.setState({
- currentView: 'week'
- })
- onPick(_date, true)
- } else {
- this.setState({
- currentView: 'date'
- }, () => {
- if (currentView === type) {
- onPick(_date, true)
- } else {
- this.setState({
- staticDate: _date
- })
- }
- })
- }
- }
- onDatePick (_date) {
- const { type, showTime, onPick, timeInterval, weekOffset } = this.props
- if (type === 'week') {
- const _weekOffset = {weekStartsOn: weekOffset}
- let weekStart = startOfWeek(_date, _weekOffset)
- let weekEnd = endOfWeek(_date, _weekOffset)
- onPick({
- startDate: weekStart,
- endDate: weekEnd
- }, false)
- return
- }
- if (type === 'timeperiod') {
- onPick(
- { startDate: _date, endDate: new Date(_date.getTime() + timeInterval * 60 * 1000) },
- true
- )
- } else {
- // date.setHours(hours, minutes, seconds)
- onPick(_date, showTime)
- }
- this.setState({
- staticDate: _date
- })
- }
- onTimePeriodPick (periodS, periodE) {
- const date = getStartDate(this.props.date)
- const currentDate = dateFormat(date, 'yyyy-MM-dd')
- this.props.onPick(
- {
- startDate: parseISO(`${currentDate} ${periodS}`),
- endDate: parseISO(`${currentDate} ${periodE}`)
- },
- true
- )
- }
- onTimePick (date, bol) {
- this.setState({
- date,
- staticDate: date
- })
- this.props.onPick(date, bol)
- }
- _getNormalComponent () {
- const { currentView } = this.state
- const { min, max, weekOffset, disabledDate, showLunar, altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData } = this.props
- const {staticDate} = this.state
- const validDate = getValidDate(staticDate)
- const { year, month } = deconstructDate(validDate)
-
- let component = null
- switch (currentView) {
- case 'date':
- case 'timeperiod':
- case 'week':
- component = (
-
- this.changeYear(true)}>
-
- this.setState({ currentView: 'year' })}
- >
- {this.getHeaderCenterContent()}
-
-
- {type !== 'month' &&
- type !== 'year' &&
- this.changeMonth(false)}>
-
-
-
- )
- }
-}
-
-export default DatePanel
diff --git a/components/date-picker/DatePicker.js b/components/date-picker/DatePicker.js
deleted file mode 100644
index b49fc48e9..000000000
--- a/components/date-picker/DatePicker.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import BasePicker from './BasePicker'
-import DatePanel from './DatePanel'
-import DateRangePanel from './DateRangePanel'
-import WeekRangePanel from './WeekRangePanel'
-import YMRangePanel from './YMRangePanel'
-import Provider from '../context'
-import { getPRCDate, deconstructDate } from './util'
-class DatePicker extends BasePicker {
- static propTypes = {
- altCalendar: PropTypes.array,
- dateMarkRender: PropTypes.func,
- altCalendarPreset: PropTypes.oneOf(['zh-CN', 'id-ID']),
- dateMarkPreset: PropTypes.oneOf(['zh-CN'])
- }
- constructor (props) {
- super(props)
- this.altCalendarPresetData = {}
- this.dateMarkPresetData = {}
- this._getLunarPresetData()
- this._getMarkPresetData()
- }
- // 获取预置数据
- _getLunarPresetData () {
- const {altCalendarPreset, altCalendar} = this.props
- const allPRCDate = {}
- if (['zh-CN', 'id-ID'].includes(altCalendarPreset)) {
- const _urlKey = altCalendarPreset === 'zh-CN' ? 'PRCLunar' : 'IndiaHoliday'
- getPRCDate(_urlKey).then(res => {
- Object.keys(res.data).forEach(key => {
- let oneYear = {}
- res.data[key][_urlKey].forEach(item => {
- Object.assign(oneYear, {
- [item.date.replace(/-/g, '/')]: {
- ...item,
- highlight: altCalendarPreset === 'id-ID'
- }
- })
- })
- Object.assign(allPRCDate, oneYear)
- })
- this.altCalendarPresetData = altCalendar ? this._altCalendarData(allPRCDate) : allPRCDate
- })
- } else {
- this.altCalendarPresetData = altCalendar ? this._altCalendarData(allPRCDate) : {}
- }
- }
- // 获取预置数据
- _getMarkPresetData () {
- const {altCalendarPreset, dateMarkPreset} = this.props
- if (altCalendarPreset && altCalendarPreset !== 'zh-CN') {
- return
- }
- dateMarkPreset === 'zh-CN' && getPRCDate('PRCHoliday').then(res => {
- const allPRCDate = {}
- Object.keys(res.data).forEach(key => {
- Object.keys(res.data[key].PRCHoliday).forEach(elkey => {
- allPRCDate[elkey.replace(/-/g, '/')] = res.data[key].PRCHoliday[elkey] === '1'
- ? 休
- : 班
- })
- })
- this.dateMarkPresetData = allPRCDate
- })
- }
- // 合并用户自定义的日期信息作为presetData
- _altCalendarData = (allPRCDate) => {
- const allData = {}
- this.props.altCalendar.length > 0 && this.props.altCalendar.forEach(item => {
- const dateInfo = deconstructDate(item.date)
- if (!Number.isNaN(dateInfo.year)) {
- Object.assign(allData, {
- [dateInfo.year + '/' + dateInfo.month + '/' + dateInfo.day]: item
- })
- }
- })
- return Object.assign(allPRCDate, allData)
- }
- initPanel (state, props) {
- let component = null
- let d = state.date
- switch (props.type) {
- case 'month':
- case 'year':
- case 'week':
- case 'date':
- component = (
-
-
-
- {currentView !== 'time' && this.renderHeader(currentView, date)}
-
- {showTime &&
-
- {this._getNormalComponent()}
-
-
- {
-
- )
- }
- pick (startDate, endDate) {
- const {range} = this.state
- const {onPick, showTime} = this.props
- range.startDate = startDate
- range.endDate = endDate
- this.setState({
- range
- })
- if (endDate) {
- onPick(range, showTime)
- }
- }
- onMouseMoveHandler (date) {
- const {range} = this.state
- range.endDate = date
- this.setState({
- range
- })
- }
- shortcutsClickEvent (e) {
- const { localeDatas, max, min } = this.props
- const {range} = this.state
- const _date = new Date()
- const val = e.target.innerText
- let days = 0
- switch (val) {
- case localeDatas.datePicker.lastWeek:
- days = 7
- break
- case localeDatas.datePicker.lastMonth:
- days = 30
- break
- case localeDatas.datePicker.lastThreeMonth:
- days = 90
- break
- case localeDatas.datePicker.lastSixMonth:
- days = 180
- break
- case localeDatas.datePicker.lastYear:
- days = 365
- break
- }
- const nDate = new Date((endOfDay(_date).getTime() + 1) - days * DAY_MILLISECONDS)
- const {startDate, endDate} = getInRangeDate(nDate, _date, max, min)
- range.startDate = startDate
- range.endDate = endDate
- this.props.onPick(range)
- }
- renderShortcut (shortcuts) {
- return (
-
- this.changeYear(true, lr)} >
- }
- {
- const layout = Object.assign({}, this.state.layout, {[lr]: 'year'})
- this.setState({ layout })
- }}
- >
- {this.getHeaderCenterContent(year, month, lr)}
-
- {
-
- {
- type.indexOf('date') !== -1 && this.changeMonth(false, lr)} >
- }
-
- {
- shortcuts.map((m, n) => {
- return (
-
- )
- }
- getRangeDateStr () {
- let { range, showMask, leftDate, rightDate } = this.state
- let { format } = this.props
- format = format.substr(format.match(/[H|h]\s*/).index)
- const cls = classNames(
- showMask && 'hi-datepicker__time-text'
- )
- return (
-
- {`${dateFormat(range.startDate ? range.startDate : leftDate, format)} - ${dateFormat(range.endDate ? range.endDate : rightDate, format)}`}
-
- )
- }
- selectTimeEvent () {
- this.setState({
- showMask: !this.state.showMask
- })
- }
- getYearOrMonthData (val, type, _year) {
- const start = type === 'year' ? val - 4 : 1
- let trs = [[], [], [], []]
- let num = 0
- const currentYear = new Date().getFullYear()
- const currentMonth = new Date().getMonth()
- for (let i = 0; i < 4; i++) {
- let row = trs[i]
- for (let j = 0; j < 3; j++) {
- let col = row[j] || (row[j] = { type: 'normal' })
- const y = start + num
- if (y === currentYear || y === currentMonth + 1) {
- col.type = 'today'
- }
- if (y === val) {
- col.type = 'current'
- }
- col = colDisabled(type, col, _year, this.props, y)
- col.value = y
- num++
- }
- }
- return trs
- }
- yearPick (flag, date) {
- const layout = Object.assign({}, this.state.layout, {[flag]: 'month'})
- const _d = flag === 'left' ? {leftDate: date} : {rightDate: date}
- this.setState({
- ..._d,
- layout
- })
- }
- monthPick (flag, date) {
- const layout = Object.assign({}, this.state.layout, {[flag]: 'date'})
- const _d = flag === 'left' ? {leftDate: date} : {rightDate: date}
- this.setState({
- ..._d,
- layout
- })
- }
- _getNormalComponent (date, flag) {
- let { minDate, maxDate, range, layout } = this.state
- const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type, disabledDate } = this.props
- let component = null
- const { year, month } = deconstructDate(date)
- switch (layout[flag]) {
- case 'year':
- const yearData = this.getYearOrMonthData(year, 'year')
- component = (
- - {m} -
- ) - }) - } -
-
- this.arrowEvent('up')}
- >
-
- )
- }
- getdisabledType (val) {
- const { datas } = this.props
- let isDisabled = false
- datas.forEach(data=>{
- if(data.value === val){
- isDisabled = data.disabled
- }
- })
- return isDisabled
- }
- arrowEvent (direction) {
- const arrow = this.getStep(direction)
- const st = this.listRef.current.scrollTop
- const val = Math.round(st * Math.abs(arrow) / 32)
-
- this.props.onSelect(this.props.type, val + arrow, arrow)
- }
-
- isScrollStop (val, el) {
- const { disabledList } = this.props
- this.topValue_2 = el.scrollTop
- if (this.topValue_1 === this.topValue_2) {
- el.scrollTop = val * 32
- if (!disabledList.includes(val)) {
- const arrow = this.getStep()
- !this.getdisabledType(val) && this.props.onSelect(this.props.type, val * arrow)
- }
- }
- }
- scrollEvent (e) {
- const { type } = this.props
- clearTimeout(this.timer)
- const st = e.target.scrollTop
- this.topValue_1 = st
- const val = Math.round(st / 32)
- if ((type === 'hours' && val > 23) || ((type === 'minutes' || type === 'seconds') && val > 59)) {
- return false
- }
- this.timer = setTimeout(this.isScrollStop.bind(this, val, e.target), 200)
- }
-
- clickEvent (type, e) {
- e.stopPropagation()
- const li = e.target
- if (li.nodeName !== 'LI') return false
- if (!li.textContent) return
- !this.getdisabledType(parseInt(li.textContent)) && this.props.onSelect(type, parseInt(li.textContent), e)
- }
- render () {
- const { showArrow } = this.state
- const { type, datas } = this.props
- return
+export default TimePicker
diff --git a/components/date-picker/TimePicker.js b/components/date-picker/TimePicker.js
deleted file mode 100644
index e6bc446ba..000000000
--- a/components/date-picker/TimePicker.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import DatePickerType from './Type'
-import BasePicker from './BasePicker'
-import TimePanel from './TimePanel'
-import Provider from '../context'
-import TimeRangePanel from './TimeRangePanel'
-class TimePicker extends BasePicker {
- initPanel (state, props) {
- return (
- props.type === 'time'
- ?
+ {
+ setShowPanel(true)
+ setInputFocus(true)
+ }}
+ >
+
+
+
+
+ )
+}
+
+export default Provider(TimePicker)
diff --git a/components/date-picker/TimeRangePanel.js b/components/date-picker/TimeRangePanel.js
deleted file mode 100644
index 184b77758..000000000
--- a/components/date-picker/TimeRangePanel.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import React, {Component} from 'react'
-import Time from './Time'
-import Provider from '../context'
-
-class TimeRangePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- style: props.style
- }
- }
- onTimePick (flag, _date, bol) {
- const {date} = this.props
- const r = {}
- r.startDate = flag === 'left' ? _date : date.startDate
- r.endDate = flag === 'right' ? _date : date.endDate
- this.props.onPick(r, bol)
- }
- render () {
- const { date, style } = this.props
- const {startDate, endDate} = date
- return (
-
+ {fullTimeInfo.nodeMark}
+ {fullTimeInfo.text ? (
+ {
+ altCalendarPreset === 'id-ID' && showHolidayDetail(fullTimeInfo)
+ }}
+ value={cell.value}
+ className={`hi-datepicker__lunar ${fullTimeInfo.highlight ? 'hi-datepicker__lunar--highlight' : ''}`}
+ >
+ {fullTimeInfo.text}
+
+ ) : null}
+
+ )
+ } else {
+ return null
+ }
+ }
+ return (
+
+
+
- {
- shortcuts && this.renderShortcut(shortcuts)
- }
-
- {
- showTime && (
-
- {
- this.renderHeader(currentView, leftDate, 'left')
- }
-
-
- {this._getNormalComponent(leftDate, 'left')}
-
-
- {
- this.renderHeader(currentView, rightDate, 'right')
- }
-
-
- {this._getNormalComponent(rightDate, 'right')}
-
-
- {this.getRangeDateStr()}
-
- )
- }
- {
- showMask && (
- { this.setState({showMask: false}) }} />
- )
- }
- {
- showMask && (
- {
- this.setState({
- range: d,
- leftDate: d.startDate,
- rightDate: d.endDate
- })
- this.props.onPick(d, r)
- }}
- />
- )
- }
-
- )
- }
-}
-
-export default Provider(DateRangePanel)
diff --git a/components/date-picker/Time.js b/components/date-picker/Time.js
deleted file mode 100644
index 92d6936f2..000000000
--- a/components/date-picker/Time.js
+++ /dev/null
@@ -1,225 +0,0 @@
-import React, {Component} from 'react'
-import {deconstructDate} from './util'
-import TimeList from './TimeList'
-import { isSameDay, getValidDate } from './dateUtil'
-
-class Time extends Component {
- constructor (props) {
- super(props)
- this.state = {
- date: getValidDate(props.date),
- endDate: '',
- prefix: {
- hours: 0,
- minutes: 0,
- seconds: 0
- }
- }
- }
- callback (date) {
- this.setState({
- date
- })
- this.props.onPick(date, true)
- }
- componentWillReceiveProps (props) {
-
- if (!isSameDay(props.date, this.state.date)) {
- this.setState({
- date: getValidDate(props.date)
- })
- }
- }
- whenDisableChange (list, val, arrowVal) {
- let _value = val + arrowVal
- while (list.includes(_value)) {
- _value += arrowVal
- }
- return _value
- }
- selectedEvent (type, value, arrow) {
- const { date } = this.state
- const cDate = new Date(date.getTime())
- const disabledList = this._getDsiabledList()[type]
- if (disabledList.includes(value) && arrow) {
- value = this.whenDisableChange(disabledList, value, arrow)
- }
- if (type === 'hours') {
- cDate.setHours(value)
- } else if (type === 'minutes') {
- cDate.setMinutes(value)
- } else if (type === 'seconds') {
- cDate.setSeconds(value)
- }
- if (cDate.getTime() !== date.getTime()) {
- this.callback(cDate)
- }
-
- }
-
- isShowHMS () {
- const { format } = this.props
- return {
- hours: format.indexOf('H') > -1 || format.indexOf('h') > -1,
- minutes: format.indexOf('m') > -1,
- seconds: format.indexOf('s') > -1
- }
- }
- // 设置Date的选中状态
- setDisableTime (type,i,disabledTime) {
- const { timeRangePanelType, startDate, date } = this.props
- let isDisabled = disabledTime.includes(i)
-
- if (this.props.isCheckTime) {
- if (timeRangePanelType === 'right') {
- const { hours, minutes, seconds } = deconstructDate(startDate)
- const { hours: endHours, minutes: endMinutes } = date ? deconstructDate(date) : deconstructDate(new Date())
- isDisabled = type === 'hours' && hours > i
- if (type === 'minutes') {
- if (endHours === hours) {
- isDisabled = minutes > i
- }
- if (endHours < hours) {
- isDisabled = true
- }
- }
-
- if (type === 'seconds') {
- if (endHours === hours) {
- isDisabled = endMinutes === minutes && seconds > i
- if (endMinutes < minutes) {
- isDisabled = true
- }
- }
- if (endHours < hours) {
- isDisabled = true
- }
- }
- }
- }
-
- return isDisabled
- }
-
- getStep(type){
- const {hourStep,minuteStep,secondStep} = this.props
- let step = 1
- const directionStep = 1
- switch (type) {
- case 'hours':
- step = hourStep || directionStep
- break;
- case 'minutes':
- step = minuteStep || directionStep
- break;
- case 'seconds':
- step = secondStep || directionStep
- break;
- default:
- step = 1
- break;
- }
- return step
- }
-
- generateDatas (type) {
-
- let count
- let datas = []
- const currentDate = deconstructDate(this.state.date)
- const step = this.getStep(type)
- const disabledList = this._getDsiabledList()
- const disabledTime = disabledList[type]
- if (type === 'hours') {
- count = 24
- } else if (type === 'minutes') {
- count = 60
- } else {
- count = 60
- }
- for (let i = 0; i < count; i += 1) {
-
- if(i%step === 0 || i === 0){
- datas.push({
- value: i,
- text: i < 10 ? '0' + i : i.toString(),
- disabled: this.setDisableTime(type,i,disabledTime),
- current: i === currentDate[type]
- })
- }
- }
- return datas
- }
-
- _getDsiabledList () {
- const { disabledHours, disabledMinutes, disabledSeconds } = this.props
- const currentDate = deconstructDate(this.state.date)
- return {
- hours: Object.prototype.toString.call(disabledHours) === '[object Array]' ? disabledHours : (disabledHours() || []),
- minutes: Object.prototype.toString.call(disabledMinutes) === '[object Array]' ? disabledMinutes : (disabledMinutes(currentDate['hours']) || []),
- seconds: Object.prototype.toString.call(disabledSeconds) === '[object Array]' ? disabledSeconds : (disabledSeconds(currentDate['hours'], currentDate['minutes']) || [])
- }
- }
- renderTimeList (type) {
- const { hourStep, minuteStep, secondStep } = this.props
- const dDate = deconstructDate(this.state.date)
- const disabledList = this._getDsiabledList()
- const isShow = this.isShowHMS()[type]
- if (!isShow) { return null }
- return
-
- )
- }
-}
-Time.defaultProps = {
- hourStep: 1,
- minuteStep: 1,
- secondStep: 1,
- format: 'HH:mm:ss',
- disabledHours: () => [],
- disabledMinutes: () => [],
- disabledSeconds: () => []
-}
-
-export default Time
diff --git a/components/date-picker/TimeList.js b/components/date-picker/TimeList.js
deleted file mode 100644
index fe03d84b6..000000000
--- a/components/date-picker/TimeList.js
+++ /dev/null
@@ -1,173 +0,0 @@
-import React, {Component} from 'react'
-import classNames from 'classnames'
-import Icon from '../icon'
-
-export default class TimeList extends Component {
- constructor (props) {
- super(props)
- const prefixCount = [1, 2, 3]
- const suffixCount = [1, 2, 3]
- this.liPrefix = prefixCount.map((item, index) => {
- return
- })
- this.liSuffix = suffixCount.map((item, index) => {
- return
- })
- this.listRef = React.createRef()
- // this.scrollEvent = this.scrollEvent.bind(this)
- this.state = {
- showArrow: false
- }
- this.timer = null
- this.topValue_1 = 0
- this.topValue_2 = 0
- }
- scrollTo () {
- const arrow = this.getStep()
- const { value } = this.props
- const dVal = 32/arrow
-
- this.listRef.current && (this.listRef.current.scrollTop = value * dVal)
- }
- componentDidUpdate () {
- this.scrollTo()
- }
- componentDidMount () {
- // this.listRef.current.addEventListener('scroll', this.scrollEvent)
- setTimeout(() => {
- this.scrollTo()
- }, 0)
- }
-
- componentWillUnmount () {
- window.clearTimeout(this.timer)
- // this.listRef.current.removeEventListener('scroll', this.scrollEvent)
- }
-
- getStep(direction){
- const {hourStep,minuteStep,secondStep,type} = this.props
- const directionStep = direction && direction === 'up' ? -1 : 1
- let step = directionStep
-
- switch (type) {
- case 'hours':
- step = hourStep
- break;
- case 'minutes':
- step = minuteStep
- break;
- case 'seconds':
- step = secondStep
- break;
- default:
- step = directionStep
- break;
- }
- if(Number.isNaN(step) || step === -1) {
- step = 1
- }
- return step * directionStep
- }
- renderArrow (type) {
- return (
-
- {
- showHour && {lHours}
- }
- {
- showMinute && {lMinutes}
- }
- {
- showSecond && {lSeconds}
- }
-
-
- {this.renderTimeList('hours')}
- {this.renderTimeList('minutes')}
- {this.renderTimeList('seconds')}
-
-
- this.setState({showArrow: true})}
- onMouseLeave={() => this.setState({showArrow: false})}
- >
-
- }
-}
diff --git a/components/date-picker/TimePanel.js b/components/date-picker/TimePanel.js
deleted file mode 100644
index 0c0ad13e3..000000000
--- a/components/date-picker/TimePanel.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import React, {Component} from 'react'
-import Time from './Time'
-import { isValid } from './dateUtil'
-
-class TimePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- style: props.style
- }
- if (this.props.type !== 'time') {
- this.state.style = {
- position: 'relative'
- }
- }
- }
- onTimePick (date, bol) {
- const {showTime} = this.props
- if (showTime) {
- this.props.onPick(date, true)
- } else {
- this.props.onPick(date, bol)
- }
- }
- render () {
- let { localeDatas, date, type, format } = this.props
- return (
- -
- {this.liPrefix}
- {
- datas.map((data, index) => {
- const _class = classNames(
- 'hi-timepicker__item',
- data.current && 'hi-timepicker__item--current',
- data.disabled && 'hi-timepicker__item--disabled'
- )
- return (
-
-
-
- )
- }
-}
-
-export default TimePanel
diff --git a/components/date-picker/TimePeriodPanel.js b/components/date-picker/TimePeriodPanel.js
deleted file mode 100644
index 1549c1014..000000000
--- a/components/date-picker/TimePeriodPanel.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React, {Component} from 'react'
-import classNames from 'classnames'
-import {getHours, getMinutes} from './dateUtil'
-class TimePeriodPanel extends Component {
- constructor (props) {
- super(props)
- this.listEl = React.createRef()
- }
- calcInterval () {
- const { timeInterval } = this.props
- const segment = 24 * 60 / timeInterval
- let pre = 0
- let next = 0
- let arr = []
- const func = (val) => (val < 10 ? '0' + val : val)
- for (let i = 0; i < segment; i++) {
- next += timeInterval
- const time = func(parseInt(pre / 60)) + ':' + func(pre % 60) + ' ~ ' + func(parseInt(next / 60)) + ':' + func(next % 60)
- arr.push(time)
- pre = next
- }
- return arr
- }
- getActiveIndex () {
- const { date, timeInterval } = this.props
- return timeInterval >= 60 ? getHours(date) * 60 / timeInterval : (getMinutes(date) + getHours(date) * 60) / timeInterval
- }
- componentDidMount () {
- setTimeout(() => {
- this.listEl.current && (this.listEl.current.scrollTop = this.getActiveIndex() * 37)
- }, 0)
- }
- render () {
- const list = this.calcInterval()
- const { onTimePeriodPick, localeDatas } = this.props
- const activeIndex = this.getActiveIndex()
- return
-
- }
-}
-
-export default TimePeriodPanel
diff --git a/components/date-picker/TimePicker.d.ts b/components/date-picker/TimePicker.d.ts
new file mode 100644
index 000000000..a856c306d
--- /dev/null
+++ b/components/date-picker/TimePicker.d.ts
@@ -0,0 +1,8 @@
+interface TimeProps extends CommonProps {
+ type?: 'default' | 'timerange'
+ disabledHours?: () => number[]
+ disabledMinutes?: (selectedHour: number) => number[]
+ disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[]
+}
+declare const TimePicker: React.ComponentType{localeDatas.datePicker.timePeriod}
-
-
- -
- {
- list.map((item, index) => {
- const cls = classNames(
- 'hi-datepicker__period-item',
- activeIndex === index && 'hi-datepicker__period-item--active'
- )
- return
-
-
-
-
- )
- }
-}
-
-export default Provider(TimeRangePanel)
diff --git a/components/date-picker/Type.js b/components/date-picker/Type.js
deleted file mode 100644
index 4f18b2187..000000000
--- a/components/date-picker/Type.js
+++ /dev/null
@@ -1,28 +0,0 @@
-export default {
- // 默认普通日期(年月日)选择器
- Date: 'date',
- // 日期时间
- DateTime: 'datetime',
- // 时间
- Time: 'time',
- // 周
- Week: 'week',
- // 月
- Month: 'month',
- // 年
- Year: 'year',
- // 日期范围选择
- DateRange: 'daterange',
- // 周范围选择
- WeekRange: 'weekrange',
- // 时间范围选择
- TimeRange: 'timerange',
- // 时间段选择
- TimePeriod: 'timeperiod',
- // 日期时间范围选择
- DateTimeRange: 'datetimerange',
- // 月范围
- MonthRange: 'monthrange',
- // 年范围
- YearRange: 'yearrnage'
-}
diff --git a/components/date-picker/WeekRangePanel.js b/components/date-picker/WeekRangePanel.js
deleted file mode 100644
index 6b9354e55..000000000
--- a/components/date-picker/WeekRangePanel.js
+++ /dev/null
@@ -1,281 +0,0 @@
-import React, {Component} from 'react'
-import {deconstructDate, nextMonth, colDisabled} from './util'
-import Calender from './Calender'
-import Icon from '../icon'
-import classNames from 'classnames'
-import {startOfWeek, endOfWeek, isSameMonth, isValid, getStartDate, toDate, changeYear, changeMonth} from './dateUtil'
-
-const _parseProps = (date) => {
- const {startDate, endDate} = date
- let leftDate = getStartDate(date)
- let rightDate = isValid(endDate) ? endDate : nextMonth(leftDate)
- if (endDate) {
- if (isSameMonth(startDate, endDate)) {
- rightDate = nextMonth(leftDate)
- }
- }
- return {
- range: {
- startDate,
- endDate,
- selecting: false
- },
- leftDate,
- rightDate
- }
-}
-export default class WeekRangePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- ..._parseProps(props.date),
- layout: {
- left: 'date',
- right: 'date'
- }
- }
- }
-
- /**
- * Header 中间部分内容
- * @param {String} type 选择器类型
- * @param {Number} year 当前年份
- * @param {Number} month 当前月份
- */
- getHeaderCenterContent (year, month, flag) {
- const { localeDatas, locale } = this.props
- const { layout } = this.state
- if (layout[flag] === 'year') {
- return (year - 4) + '~' + (year + 7)
- }
- let arr = [localeDatas.datePicker.monthShort[month - 1]]
- if (locale === 'zh-CN') {
- arr.unshift(year + '年 ')
- } else {
- arr.push(` ${year}`)
- }
- return arr
- }
- getYearOrMonthData (val, type, _year) {
- const start = type === 'year' ? val - 4 : 1
- let trs = [[], [], [], []]
- let num = 0
- const currentYear = new Date().getFullYear()
- const currentMonth = new Date().getMonth()
- for (let i = 0; i < 4; i++) {
- let row = trs[i]
- for (let j = 0; j < 3; j++) {
- let col = row[j] || (row[j] = { type: 'normal' })
- const y = start + num
- if (y === currentYear || y === currentMonth + 1) {
- col.type = 'today'
- }
- if (y === val) {
- col.type = 'current'
- }
- col = colDisabled(type, col, _year, this.props, y)
- col.value = y
- num++
- }
- }
- return trs
- }
- /**
- * 渲染 Header 部分（包含箭头快捷操作）
- * @param {Object} args {
- * year: 当前年份
- * month: 当前月份
- * type: 选择器类型
- * num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
- * }
- */
- renderHeader (type, value, lr) {
- const {year, month} = deconstructDate(value)
- return (
-
-
- )
- }
- /**
- * 改变月份事件
- * @param {Number} num 加减值
- */
- changeMonth (flag, pos) {
- let {leftDate, rightDate} = this.state
- let nLeftDate = toDate(leftDate)
- let nRightDate = toDate(rightDate)
- if (pos === 'left') {
- nLeftDate = changeMonth(leftDate, flag)
- } else {
- nRightDate = changeMonth(rightDate, flag)
- }
- if (nLeftDate < nRightDate) {
- this.setState({
- leftDate: nLeftDate,
- rightDate: nRightDate
- })
- }
- }
- /**
- * 改变年份事件
- * @param {Number} num 加减值
- */
- changeYear (flag, pos) {
- let {leftDate, rightDate} = this.state
- let nLeftDate = toDate(leftDate)
- let nRightDate = toDate(rightDate)
- if (pos === 'left') {
- nLeftDate = changeYear(leftDate, flag)
- } else {
- nRightDate = changeYear(rightDate, flag)
- }
- if (nLeftDate < nRightDate) {
- this.setState({
- leftDate: nLeftDate,
- rightDate: nRightDate
- })
- }
- }
- pick (startDate, endDate) {
- const {range} = this.state
- const {onPick} = this.props
- range.startDate = startDate
- range.endDate = endDate
- this.setState({
- range,
- leftDate: startDate || this.state.leftDate,
- rightDate: endDate || this.state.rightDate
- })
- if (endDate) {
- onPick({
- startDate: startOfWeek(range.startDate),
- endDate: endOfWeek(range.endDate)
- })
- }
- }
- onMouseMoveHandler (date) {
- const {range} = this.state
- range.endDate = date
- this.setState({
- range
- })
- }
- yearPick (flag, date) {
- const layout = Object.assign({}, this.state.layout, {[flag]: 'month'})
- const _d = flag === 'left' ? {leftDate: date} : {rightDate: date}
- this.setState({
- ..._d,
- layout
- })
- }
- monthPick (flag, date) {
- const layout = Object.assign({}, this.state.layout, {[flag]: 'date'})
- const _d = flag === 'left' ? {leftDate: date} : {rightDate: date}
- this.setState({
- ..._d,
- layout
- })
- }
- _getNormalComponent (date, flag) {
- let { range, layout } = this.state
- const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, max: maxDate, min: minDate } = this.props
-
- let component = null
- const { year, month } = deconstructDate(date)
- switch (layout[flag]) {
- case 'year':
- const yearData = this.getYearOrMonthData(year, 'year')
- component = (
-
- this.changeYear(true, lr)} >
- {
- const layout = Object.assign({}, this.state.layout, {[lr]: 'year'})
- this.setState({ layout })
- }}>
- {this.getHeaderCenterContent(year, month, lr)}
-
-
- this.changeMonth(false, lr)} >
-
-
- )
- }
-}
diff --git a/components/date-picker/YMRangePanel.js b/components/date-picker/YMRangePanel.js
deleted file mode 100644
index 9990f20fa..000000000
--- a/components/date-picker/YMRangePanel.js
+++ /dev/null
@@ -1,260 +0,0 @@
-import React, {Component} from 'react'
-import Calender from './Calender'
-import { deconstructDate, colDisabled } from './util'
-import Icon from '../icon'
-import classNames from 'classnames'
-import Provider from '../context'
-import { isValid, getStartDate, toDate, changeYear, isWithinInterval, isSameYear, isSameMonth, compareAsc, startOfYear, startOfMonth, endOfYear, endOfMonth } from './dateUtil'
-
-class YMRangePanel extends Component {
- constructor (props) {
- super(props)
- const {range, leftDate, rightDate} = this._generatePanelData()
- this.maskRef = React.createRef()
- this.state = {
- date: leftDate,
- minDate: props.min,
- maxDate: props.max,
- range,
- leftDate,
- rightDate
- }
- }
- _generatePanelData () {
- const { type, date } = this.props
- let {startDate, endDate} = date
- // 组件内左右面板中日期
- let leftDate = getStartDate(date)
- const {year: sYear} = deconstructDate(leftDate)
- let rightDate = isValid(endDate) ? new Date(endDate) : new Date(sYear + '')
- const {year: eYear} = deconstructDate(rightDate)
- if (type === 'yearrange') {
- if (eYear - sYear < 12) {
- rightDate.setFullYear(sYear + 12)
- }
- } else {
- if (eYear === sYear) {
- rightDate.setFullYear(sYear + 1)
- }
- }
- const range = {
- startDate: isValid(startDate) ? startDate : null,
- endDate: isValid(endDate) ? endDate : null,
- selecting: false
- }
- return {
- range,
- leftDate,
- rightDate
- }
- }
- /**
- * 改变年份事件
- * @param {Number} num 加减值
- */
- changeYear (flag, pos) {
- let {leftDate, rightDate} = this.state
- const { type } = this.props
- let nLeftDate = toDate(leftDate)
- let nRightDate = toDate(rightDate)
- const num = type === 'yearrange' ? 12 : 1
- if (pos === 'left') {
- nLeftDate = changeYear(leftDate, flag, num)
- } else {
- nRightDate = changeYear(rightDate, flag, num)
- }
- if (nLeftDate.getFullYear() < nRightDate.getFullYear()) {
- this.setState({
- leftDate: nLeftDate,
- rightDate: nRightDate
- })
- }
- }
- /**
- * Header 中间部分内容
- * @param {String} type 选择器类型
- * @param {Number} year 当前年份
- * @param {Number} month 当前月份
- */
- getHeaderCenterContent (year) {
- const { locale, type } = this.props
- if (type === 'yearrange') {
- return (year - 4) + '-' + (year + 7)
- }
- if (locale === 'zh-CN') {
- return year + '年'
- } else {
- return `${year}`
- }
- }
- /**
- * 渲染 Header 部分（包含箭头快捷操作）
- * @param {Object} args {
- * year: 当前年份
- * month: 当前月份
- * type: 选择器类型
- * num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
- * }
- */
- renderHeader (value, lr) {
- const {year} = deconstructDate(value)
-
- return (
-
-
-
- {this.renderHeader(type, leftDate, 'left')}
-
-
- {this._getNormalComponent(leftDate, 'left')}
-
-
- {this.renderHeader(type, rightDate, 'right')}
-
-
- {this._getNormalComponent(rightDate, 'right')}
-
-
- {
-
- )
- }
- pick (startDate, endDate) {
- const {range} = this.state
- const {onPick, type} = this.props
- range.startDate = type === 'yearrange' ? startOfYear(startDate) : startOfMonth(startDate)
- this.setState({
- range
- })
- if (endDate) {
- range.endDate = type === 'yearrange' ? endOfYear(endDate) : endOfMonth(endDate)
- onPick(range)
- }
- }
- onMouseMoveHandler (date) {
- const {range} = this.state
- range.endDate = date
- this.setState({
- range
- })
- }
- getYearOrMonthData (year, type, _year) {
- const start = type === 'year' ? year - 4 : 1
- const { type: pType } = this.props
- let trs = [[], [], [], []]
- let num = 0
- const currentYear = new Date().getFullYear()
- const currentMonth = new Date().getMonth()
- const { range } = this.state
- const _fun = (sDate, tDate) => {
- return pType === 'yearrange' ? isSameYear(sDate, tDate) : isSameMonth(sDate, tDate)
- }
- for (let i = 0; i < 4; i++) {
- let row = trs[i]
- for (let j = 0; j < 3; j++) {
- let col = row[j] || (row[j] = { type: 'normal' })
- const y = start + num
- if (y === currentYear || (y === currentMonth + 1 && year === currentYear)) {
- col.type = 'today'
- }
- col = colDisabled(type, col, _year, this.props, y)
-
- col.value = y
- let _val = pType === 'yearrange' ? new Date(y + '') : new Date(year, y - 1)
- col.rangeStart = _fun(_val, range.startDate)
- col.rangeEnd = _fun(_val, range.endDate)
- const _ds = [range.startDate, range.endDate].sort(compareAsc)
- col.range = range.endDate && isWithinInterval(_val, {start: _ds[0], end: _ds[1]})
- num++
- }
- }
- return trs
- }
- _getNormalComponent (date, flag) {
- let { range } = this.state
- const { altCalendar, altCalendarPreset, dateMarkRender, dateMarkPreset, altCalendarPresetData, dateMarkPresetData, type } = this.props
- let component = null
- const { year } = deconstructDate(date)
- switch (type) {
- case 'yearrange':
- const yearData = this.getYearOrMonthData(year, 'year', year)
- component = (
-
- this.changeYear(true, lr)} >
- }
-
- {this.getHeaderCenterContent(year)}
-
- {
-
- this.changeYear(false, lr)} >
- }
-
-
- )
- }
-}
-
-export default Provider(YMRangePanel)
diff --git a/components/date-picker/components/Calender.jsx b/components/date-picker/components/Calender.jsx
new file mode 100644
index 000000000..34d552552
--- /dev/null
+++ b/components/date-picker/components/Calender.jsx
@@ -0,0 +1,223 @@
+import React, { useContext, useCallback, useState, useEffect, useRef } from 'react'
+import classNames from 'classnames'
+import DPContext from '../context'
+import moment from 'moment'
+import { useCalenderData } from '../hooks'
+import _ from 'lodash'
+import { getFullTime } from '../utils'
+import { CSSTransition } from 'react-transition-group'
+
+const getTDClass = (td, largeCell) => {
+ const _class = ['hi-datepicker__cell']
+ if (largeCell) {
+ _class.push('hi-datepicker__cell--large')
+ // _index === 6 && _class.push('hi-datepicker__cell--large--laster')
+ }
+ // if (td.disabled) {
+ // _class.push('hi-datepicker__cell--disabled')
+ // }
+ switch (td.type) {
+ case 'prev':
+ case 'next':
+ _class.push('hi-datepicker__cell--out')
+ break
+ default:
+ _class.push(`hi-datepicker__cell--${td.type}`)
+ break
+ }
+ td.range && _class.push('hi-datepicker__cell--range')
+ td.rangeStart && _class.push('hi-datepicker__cell--range-start')
+ td.rangeEnd && _class.push('hi-datepicker__cell--range-end')
+ return _class.join(' ')
+}
+
+const Calender = ({ view = 'date', originDate, onPick, range, mouseMove, panelPosition, renderDate }) => {
+ const {
+ weekOffset,
+ localeDatas,
+ type,
+ min,
+ max,
+ altCalendar,
+ altCalendarPreset,
+ dateMarkRender,
+ dateMarkPreset,
+ altCalendarPresetData,
+ dateMarkPresetData
+ } = useContext(DPContext)
+
+ const largeCell = altCalendar || altCalendarPreset || dateMarkRender || dateMarkPreset
+
+ const [holidayFullName, setHolidayFullName] = useState('')
+ const [holidayFullNameShow, setHolidayFullNameShow] = useState(false)
+ const holidayTime = useRef(null)
+ const [rows] = useCalenderData({
+ type,
+ view,
+ renderDate,
+ originDate,
+ localeDatas,
+ weekOffset,
+ range,
+ min,
+ max,
+ panelPosition
+ })
+ const [calenderCls, setCalenderCls] = useState('hi-datepicker__calender')
+
+ const [weekNum, setWeekNum] = useState(0)
+ useEffect(() => {
+ setCalenderCls(classNames('hi-datepicker__calender', `hi-datepicker__calender--${view}`))
+ }, [rows, view])
+ const getWeeks = () => {
+ const week = localeDatas.datePicker.week
+ return week.slice(weekOffset).concat(week.slice(0, weekOffset))
+ }
+
+ const onTableClick = (e) => {
+ const td = e.target
+ const value = td.getAttribute('value')
+ if (!['SPAN', 'DIV'].includes(td.nodeName) || td.getAttribute('type') === 'disabled') {
+ return false
+ }
+ const clickVal = parseInt(value)
+ const _date = moment(renderDate)
+ const cellType = td.getAttribute('type')
+ if (cellType === 'prev') {
+ _date.subtract(1, 'months')
+ }
+ if (cellType === 'next') {
+ _date.add(1, 'months')
+ }
+ // 需要放在修改月后，再设置日期
+ _date[view](clickVal)
+
+ onPick(_date)
+ }
+
+ const onTableMouseMove = (e) => {
+ const ele = e.target
+ // let {year, month} = deconstructDate(date)
+ const panelDate = _.cloneDeep(renderDate)
+ if (type.includes('range')) {
+ const val = ele.getAttribute('value')
+ const cellType = ele.getAttribute('type')
+ if (!val || ele.disabled || !range.selecting) return false
+ if (range.end && val * 1 === range.end[view]() * 1) return false
+ panelDate[view](val)
+ if (cellType === 'prev') {
+ panelDate.subtract(1, 'month')
+ }
+ if (cellType === 'next') {
+ panelDate.add(1, 'months')
+ }
+ mouseMove(panelDate)
+ }
+ }
+
+ const onTrMouseOver = useCallback((num) => {
+ if (num && (type === 'week' || type === 'weekrange') && weekNum !== num) {
+ setWeekNum(num)
+ }
+ }, [])
+ const showHolidayDetail = (fullTimeInfo) => {
+ clearTimeout(holidayTime.current)
+ setHolidayFullName(fullTimeInfo.FullText || fullTimeInfo.text)
+ setHolidayFullNameShow(true)
+ holidayTime.current = setTimeout(() => {
+ setHolidayFullNameShow(false)
+ }, 2000)
+ }
+ const renderAltCalendar = (cell) => {
+ if (view.includes('year') || view.includes('month')) return
+ if (
+ Object.keys(altCalendarPresetData).length > 0 ||
+ Object.keys(dateMarkPresetData).length > 0 ||
+ dateMarkRender ||
+ altCalendar
+ ) {
+ const fullTimeInfo = getFullTime({
+ cell,
+ renderDate,
+ altCalendar,
+ altCalendarPreset,
+ dateMarkRender,
+ dateMarkPreset,
+ altCalendarPresetData,
+ dateMarkPresetData
+ })
+ return (
+
-
-
- {
- this.renderHeader(leftDate, 'left')
- }
-
-
- {this._getNormalComponent(leftDate, 'left')}
-
-
- {
- this.renderHeader(rightDate, 'right')
- }
-
-
- {this._getNormalComponent(rightDate, 'right')}
-
-
+
+
+
+ {(view.includes('date') || view.includes('week')) && (
+
+
+
+ )
+}
+
+export default Calender
diff --git a/components/date-picker/components/Header.jsx b/components/date-picker/components/Header.jsx
new file mode 100644
index 000000000..a0052df19
--- /dev/null
+++ b/components/date-picker/components/Header.jsx
@@ -0,0 +1,66 @@
+import React from 'react'
+import Icon from '../../icon/index'
+import moment from 'moment'
+const getHeaderCenterContent = (localeDatas, view, renderDate, locale = 'zh-CN') => {
+ const _date = renderDate
+ const year = _date.year()
+ const month = _date.month()
+ if (view === 'year') {
+ return year - 4 + '~' + (year + 7)
+ }
+ if (view === 'month') {
+ return year
+ }
+ const arr = [localeDatas.datePicker.monthShort[month]]
+ if (locale === 'zh-CN') {
+ arr.unshift(year + '年 ')
+ } else {
+ arr.push(` ${year}`)
+ }
+ return arr
+}
+const Header = ({ view, type, changeView, onArrowEvent, localeDatas, panelPosition, renderDate, locale }) => {
+ const headerChangeDateEvent = (flag, val) => {
+ const panelDate = moment(renderDate)
+ panelDate.add(val, flag)
+ onArrowEvent(panelDate, panelPosition)
+ }
+ return (
+
+
+ {holidayFullName}
+ | {item} | + })} +
|---|
|
+
+
+ {parseInt(cell.text || cell.value) < 10
+ ? '0' + (cell.text || cell.value)
+ : cell.text || cell.value}
+
+ {renderAltCalendar(cell)}
+
+ |
+ )
+ })}
+
+ {
+
+ )
+}
+
+export default Header
diff --git a/components/date-picker/components/Input.jsx b/components/date-picker/components/Input.jsx
new file mode 100644
index 000000000..59e43c865
--- /dev/null
+++ b/components/date-picker/components/Input.jsx
@@ -0,0 +1,49 @@
+import React, { useRef, useState, useEffect, useContext } from 'react'
+import moment from 'moment'
+import DPContext from '../context'
+import { useFormat } from '../hooks'
+const Input = ({ date, onChange, onFocus, dir, placeholder }) => {
+ const { type, format, disabled, showTime, hourStep, minuteStep, secondStep, inputReadOnly, locale } = useContext(
+ DPContext
+ )
+ const [iFormat] = useFormat({
+ type,
+ showTime,
+ format,
+ locale
+ })
+
+ const cacheValues = useRef(null)
+ const [value, setValue] = useState('')
+ useEffect(() => {
+ const vals = date && moment(date).format(iFormat)
+ setValue(vals)
+ cacheValues.current = vals
+ }, [date])
+ const inputChangeEvent = (e) => {
+ const val = e.target.value
+ setValue(val)
+ if (val && val.trim().length === iFormat.length) {
+ const nVal = moment(val)
+ if (nVal.isValid()) {
+ onChange(nVal, dir)
+ } else {
+ setValue(cacheValues.current)
+ }
+ }
+ }
+ return (
+
+ )
+}
+
+export default Input
diff --git a/components/date-picker/components/Panel.jsx b/components/date-picker/components/Panel.jsx
new file mode 100644
index 000000000..89431abee
--- /dev/null
+++ b/components/date-picker/components/Panel.jsx
@@ -0,0 +1,105 @@
+import React, { useEffect, useState, useContext } from 'react'
+import classNames from 'classnames'
+import Header from './Header'
+import Calender from './Calender'
+import moment from 'moment'
+import DPContext from '../context'
+import TimePanel from './TimePanel'
+import { getView, genNewDates } from '../utils'
+
+const Panel = () => {
+ const { outDate, type, onPick, localeDatas, showTime, theme, weekOffset, locale } = useContext(DPContext)
+ const [view, setView] = useState(getView(type))
+
+ const [calRenderDates, setCalRenderDates] = useState([])
+
+ useEffect(() => {
+ const rDate = outDate[0] ? moment(outDate[0]) : moment()
+ setCalRenderDates([rDate])
+ }, [outDate])
+
+ const onCalenderPick = (date) => {
+ if (type === 'year' || (type === 'month' && view === 'month')) {
+ // year || month picker
+ onPick(
+ [type === 'year' ? moment(date.year().toString()) : moment(`${date.year().toString()}-${date.month() + 1}`)],
+ false
+ )
+ return
+ }
+ if (type === 'week' && view === 'date') {
+ // week picker
+ const weekMethod = weekOffset ? 'isoWeek' : 'week'
+ const weekNum = date[weekMethod]()
+ onPick([moment(date).startOf(weekMethod), moment(date).endOf(weekMethod)], false, weekNum)
+ return
+ }
+ let _view = view
+ if (view === 'year') {
+ _view = 'month'
+ }
+ if (view === 'month') {
+ _view = 'date'
+ }
+ setView(_view)
+ const _innerDates = genNewDates(calRenderDates, date)
+ if (view === 'date') {
+ onPick(_innerDates, showTime)
+ return
+ }
+ setCalRenderDates(_innerDates)
+ }
+
+ const panelCls = classNames(
+ 'hi-datepicker__panel',
+ `theme__${theme}`,
+ showTime && 'hi-datepicker__panel--time hi-datepicker__panel--noshadow'
+ )
+ const onTimeChange = (date) => {
+ const d = genNewDates(calRenderDates, date)
+ setCalRenderDates(d)
+ onPick(d, true)
+ }
+
+ const onArrowEvent = (date) => {
+ const _innerDates = genNewDates(calRenderDates, date)
+ if (type.includes('range') && _innerDates[0] >= _innerDates[1]) return
+ setCalRenderDates(_innerDates)
+ }
+
+ return (
+
+ headerChangeDateEvent('year', view === 'year' ? -12 : -1)}>
+
+ }
+ {
+ changeView()
+ }}
+ >
+ {getHeaderCenterContent(localeDatas, view, renderDate, locale)}
+
+ {
+
+ {view !== 'year' && view !== 'month' && (
+ headerChangeDateEvent('months', 1)}>
+
+ }
+
+
+ )
+}
+
+export default Panel
diff --git a/components/date-picker/components/PickerIcon.jsx b/components/date-picker/components/PickerIcon.jsx
new file mode 100644
index 000000000..5b6417118
--- /dev/null
+++ b/components/date-picker/components/PickerIcon.jsx
@@ -0,0 +1,21 @@
+import React from 'react'
+import classNames from 'classnames'
+
+const PickerIcon = ({ focus, type, clearable, showTime, disabled, onClick }) => {
+ const cls = classNames(
+ 'hi-icon',
+ disabled && 'hi-icon--disabled',
+ focus && clearable ? 'icon-close-circle clear' : type.includes('time') || showTime ? 'icon-time' : 'icon-date'
+ )
+ return (
+ {
+ if (disabled) return
+ onClick(focus && clearable)
+ }}
+ />
+ )
+}
+
+export default PickerIcon
diff --git a/components/date-picker/components/RangePanel.jsx b/components/date-picker/components/RangePanel.jsx
new file mode 100644
index 000000000..0b0c83783
--- /dev/null
+++ b/components/date-picker/components/RangePanel.jsx
@@ -0,0 +1,289 @@
+import React, { useEffect, useState, useCallback, useContext } from 'react'
+import classNames from 'classnames'
+import Header from './Header'
+import Calender from './Calender'
+import moment from 'moment'
+import DPContext from '../context'
+import TimePanel from './TimePanel'
+import { useFormat } from '../hooks'
+import TimePeriodPanel from './TimePeriodPanel'
+import _ from 'lodash'
+import { getView, parseRenderDates, genNewDates } from '../utils'
+
+const RangePanel = () => {
+ const { outDate, type, onPick, localeDatas, showTime, format, timeInterval, shortcuts, theme, locale } = useContext(
+ DPContext
+ )
+
+ const [showRangeMask, setShowRangeMask] = useState(false)
+ const [views, setViews] = useState([getView(type), getView(type)])
+ const [iFormat] = useFormat({
+ format,
+ type,
+ showTime,
+ locale
+ })
+ const [calRenderDates, setCalRenderDates] = useState([])
+ const [range, setRange] = useState({
+ start: null,
+ end: null,
+ selecting: false
+ })
+ useEffect(() => {
+ const _outDate = _.cloneDeep(outDate)
+ setRange({
+ start: _outDate[0],
+ end: _outDate[1],
+ selecting: _outDate[0] && !_outDate[1]
+ })
+ }, [outDate])
+
+ useEffect(() => {
+ setCalRenderDates(parseRenderDates(outDate, type))
+ }, [outDate])
+ /**
+ * Header 部分点击事件
+ */
+ const changeViewEvent = useCallback((uIndex) => {
+ setViews((pre) => {
+ const p = [...pre]
+ p[uIndex] = 'year'
+ return p
+ })
+ }, [])
+
+ const setRanges = (date) => {
+ const newRange = { ...range }
+ if (range.selecting) {
+ if (newRange.start > date) {
+ newRange.selecting = false
+ newRange.end = newRange.start
+ newRange.start = date
+ }
+ if (type === 'weekrange') {
+ onPick([newRange.start.startOf('week'), newRange.end.endOf('week')], showTime)
+ } else {
+ onPick([newRange.start, newRange.end], showTime)
+ }
+ } else {
+ newRange.selecting = true
+ newRange.start = date
+ newRange.end = null
+ }
+ setRange(newRange)
+ }
+ /**
+ * 日历面板点击事件
+ * @param {*} date
+ * @param {*} dir
+ */
+ const onCalenderPick = (date, uIndex) => {
+ if (type === 'timeperiod' && views[uIndex] === 'date') {
+ onPick([date, moment(date).hour(date.hour() + timeInterval / 60)], true)
+ return
+ }
+ if (type.includes(views[uIndex]) || type === 'weekrange') {
+ setRanges(date)
+ } else {
+ const _innerDates = genNewDates(calRenderDates, date, uIndex)
+ setCalRenderDates(_innerDates)
+ }
+ const _views = _.cloneDeep(views)
+ if (views[uIndex] === 'month' && !type.includes('month')) {
+ _views[uIndex] = 'date'
+ }
+ if (views[uIndex] === 'year' && !type.includes('year')) {
+ _views[uIndex] = 'month'
+ }
+ setViews(_views)
+ // if (type === 'daterange' || type === 'weekrange' || type === 'timeperiod') {
+ // const _innerDates = genNewDates(calRenderDates, date, uIndex)
+ // setCalRenderDates(_innerDates)
+ // }
+ }
+
+ const onMouseMove = (date) => {
+ setRange({
+ ...range,
+ end: date
+ })
+ }
+
+ const onTimeChange = (date, cIndex) => {
+ const _innerDates = _.cloneDeep(calRenderDates)
+ _innerDates[cIndex] = date
+ onPick(_innerDates, true)
+ }
+ const getRangeDateStr = () => {
+ const _format = iFormat.substr(iFormat.match(/[H|h]\s*/).index)
+ const cls = classNames(showRangeMask && 'hi-datepicker__timetext')
+ const startOfDay = moment().startOf('day').format(_format)
+ const endOfDay = moment().endOf('day').format(_format)
+ return (
+
+ {`${range.start ? range.start.format(_format) : startOfDay} - ${
+ range.end ? range.end.format(_format) : endOfDay
+ }`}
+
+ )
+ }
+ const onArrowEvent = (date, index) => {
+ const _innerDates = genNewDates(calRenderDates, date, index)
+ if (type.includes('range') && _innerDates[0].isSameOrAfter(_innerDates[1], 'month')) {
+ return
+ }
+ setCalRenderDates(_innerDates)
+ }
+ const onTimePeriodPick = useCallback(
+ (ts1, ts2) => {
+ const [leftDate] = _.cloneDeep(calRenderDates)
+ if (outDate[0]) {
+ onPick([
+ moment(leftDate).hour(parseInt(ts1)).minute(0).second(0),
+ moment(leftDate).hour(parseInt(ts2)).minute(0).second(0)
+ ])
+ }
+ },
+ [calRenderDates]
+ )
+
+ const shortcutsClickEvent = (item) => {
+ if (item.range) {
+ // 新版 shortcuts
+ onPick([moment(item.range[0]), moment(item.range[1])])
+ } else {
+ // 旧版
+ let days
+ const currentDate = moment()
+ switch (item) {
+ case localeDatas.datePicker.lastWeek:
+ days = 7
+ break
+ case localeDatas.datePicker.lastMonth:
+ days = 30
+ break
+ case localeDatas.datePicker.lastThreeMonth:
+ days = 90
+ break
+ default:
+ days = 365
+ break
+ }
+ const startDate = moment().subtract(days, 'days')
+ onPick([startDate, currentDate])
+ }
+ }
+ const renderShortcut = () => {
+ return (
+
+ {calRenderDates[0] && (
+
+ setView('year')}
+ onArrowEvent={onArrowEvent}
+ localeDatas={localeDatas}
+ view={view}
+ panelPosition={0}
+ type={type}
+ locale={locale}
+ />
+
+ )}
+
+ {type === 'date' && showTime && (
+
+
+ )}
+
+
+ )
+ }
+ const isDisableFooter = range.start && range.end && !range.selecting
+ const panelCls = classNames(
+ 'hi-datepicker__panel',
+ `theme__${theme}`,
+ type.includes('range') && 'hi-datepicker__panel--range',
+ type === 'timeperiod' && 'hi-datepicker__panel--timeperiod',
+ (showTime || type === 'timeperiod') && 'hi-datepicker__panel--noshadow'
+ )
+ return (
+ -
+ {shortcuts.map((m, n) => {
+ return (
+
+ {shortcuts && renderShortcut()}
+
+ {type === 'daterange' && showTime && (
+
+ {calRenderDates[0] && (
+
+ changeViewEvent(0)}
+ onArrowEvent={onArrowEvent}
+ localeDatas={localeDatas}
+ view={views[0]}
+ panelPosition={0}
+ type={type}
+ locale={locale}
+ />
+ onCalenderPick(date, 0)}
+ view={views[0]}
+ range={range}
+ mouseMove={onMouseMove}
+ panelPosition="left"
+ />
+
+ )}
+
+
+ {calRenderDates[1] &&
+ (type === 'timeperiod' ? (
+
+ changeViewEvent(1)}
+ onArrowEvent={onArrowEvent}
+ localeDatas={localeDatas}
+ view={views[1]}
+ leftDate={calRenderDates[0]}
+ panelPosition={1}
+ type={type}
+ locale={locale}
+ />
+ onCalenderPick(date, 1)}
+ mouseMove={onMouseMove}
+ leftDate={calRenderDates[0]}
+ panelPosition="right"
+ />
+
+ ))}
+
+ {
+ isDisableFooter && setShowRangeMask(true)
+ }}
+ >
+ {getRangeDateStr()}
+
+ )}
+ {showRangeMask && (
+ setShowRangeMask(false)} />
+
+ arrowEvent('up')}>
+
+ )
+ }
+ const arrowEvent = (direction) => {
+ const arrow = getStep(direction)
+ const st = listRef.current.scrollTop
+ const val = Math.round((st * Math.abs(arrow)) / 32)
+ onSelect(type, val + arrow, arrow)
+ }
+ return (
+
- {this.initPanel(this.state, this.props)}
-
- ) : null
- }
-
- )
- }
-}
-
-export default BasePicker
diff --git a/components/date-picker/datepicker-legacy/Calender.js b/components/date-picker/datepicker-legacy/Calender.js
deleted file mode 100644
index 614430269..000000000
--- a/components/date-picker/datepicker-legacy/Calender.js
+++ /dev/null
@@ -1,297 +0,0 @@
-import React, {Component} from 'react'
-import {deconstructDate, getYearWeek} from './util'
-import Provider from '../../context'
-
-import {
- getDaysInMonth,
- subMonths,
- getDay,
- startOfMonth,
- isSameDay,
- compareAsc,
- addMonths,
- isToday,
- isValid,
- isWithinInterval,
- toDate
-} from './dateUtil'
-import {DAY_MILLISECONDS} from './constants'
-class Calender extends Component {
- constructor (props) {
- super(props)
- this.state = {
- rows: [[], [], [], [], [], []]
- }
- this.weekNum = 0
- }
- _getTime (week, y, m) {
- const r = new Date(y, m - 1, 1)
- const t = r.getTime() - week * DAY_MILLISECONDS
- return t
- }
-
- getRows () {
- let {type, range, date: _date, minDate, maxDate, weekOffset} = this.props
- let {year, month, week} = deconstructDate(_date, weekOffset)
- let {endDate, startDate} = range || {startDate: null, endDate: null}
- // * dayCount: 当月天数
- // * lastMonthDayCount: 上月总天数
- // * firstDayWeek: 当月第一天是周几
- let firstDayWeek = getDay(startOfMonth(_date)) - weekOffset
- if (firstDayWeek <= 0) { // 如果为0 代表该月第一天是周日，在日历上需要第二行开始显示
- firstDayWeek = 7
- }
- const startTimeByCurrentPanel = this._getTime(firstDayWeek, year, month)// 当前日期面板中第一个日期的具体毫秒数(指向上一个月)
- const dayCount = getDaysInMonth(_date)
-
- let lastMonthDayCount = getDaysInMonth(subMonths(_date, 1)) // 上月总天数
- const {rows} = this.state
- let count = 0
- for (let i = 0; i < 6; i++) {
- let row = rows[i]
- for (let j = 0; j < 7; j++) {
- let col = row[j] || (row[j] = {type: 'normal', range: false, rangeStart: false, rangeEnd: false})
- col.type = 'normal'
- const currentTime = startTimeByCurrentPanel + DAY_MILLISECONDS * (i * 7 + j) // 当前日期的毫秒数
- if (i === 0) { // 处理第一行的日期数据
- if (j >= firstDayWeek) { // 本月
- col.value = ++count
- } else { // 上月
- col.value = lastMonthDayCount - firstDayWeek + j + 1
- col.type = 'prev'
- }
- } else {
- ++count
- if (count <= dayCount) { // 本月
- col.value = count
- } else { // 下月
- col.value = count - dayCount
- col.type = 'next'
- }
- }
- // if (range && (isSameDay(range.startDate, currentTime) || isSameDay(range.endDate, currentTime))) {
- // col.type = 'current'
- // }
- if (isToday(currentTime)) {
- col.type = 'today'
- }
- if (isSameDay(_date, currentTime) && !range && type !== 'week') {
- col.type = 'current'
- }
- if (type === 'daterange' || type === 'weekrange') {
- const sv = isValid(startDate)
- const ev = isValid(endDate)
- if (sv) {
- col.rangeStart = startDate && isSameDay(currentTime, startDate)
- }
- if (ev) {
- col.rangeEnd = endDate && isSameDay(currentTime, endDate)
- }
- if (sv && ev) {
- const _ds = [startDate, endDate].sort(compareAsc)
- col.range = endDate && isWithinInterval(toDate(currentTime), {start: _ds[0], end: _ds[1]})
- }
- row.weekNum = getYearWeek(new Date(currentTime), weekOffset).weekNum
- }
- col.disabled = (minDate && compareAsc(currentTime, minDate) === -1) || (maxDate && compareAsc(currentTime, maxDate) === 1)
- }
- if (type === 'week') {
- let _month = month
- let _year = year
- if (row[1].type === 'prev') {
- _month -= 1
- if (_month <= 0) {
- _year -= 1
- _month = 12
- }
- }
- if (row[1].type === 'next') {
- _month += 1
- if (_month >= 12) {
- _year += 1
- _month = 1
- }
- }
- const cw = getYearWeek(new Date(_year, _month - 1, row[1].value), weekOffset).weekNum
- let bol = cw === week
- row.forEach(col => {
- col.range = bol
- })
- row[0].rangeStart = bol
- row[6].rangeEnd = bol
- row.currentWeek = bol
- row.weekNum = cw
- }
- }
- return rows
- }
- _getClassName (ele) {
- if (!ele) return
- if (ele.nodeName !== 'TD') {
- return this._getClassName(ele.parentNode)
- } else {
- return ele.className
- }
- }
- handlerClick (e) {
- const {onPick, date, type, range} = this.props
- let {year, month, hours, minutes, seconds} = deconstructDate(date)
-
- const td = e.target
- const cls = this._getClassName(td)
- const value = td.getAttribute('value')
- if ((td.nodeName !== 'SPAN' && td.nodeName !== 'TD' && td.nodeName !== 'DIV') || td.disabled) return false
- if (cls.indexOf('disabled') !== -1) return false
- const day = parseInt(value)
- let newDate = new Date(year, month - 1)
- if (cls.indexOf('prev') !== -1) {
- newDate = addMonths(newDate, -1)
- }
- if (cls.indexOf('next') !== -1) {
- newDate = addMonths(newDate, 1)
- }
- newDate.setDate(day)
- newDate.setHours(hours, minutes, seconds)
- if (type === 'year') {
- year = parseInt(value)
- newDate.setFullYear(year)
- }
- if (type === 'month') {
- month = parseInt(value)
- newDate.setMonth(month - 1)
- }
- if (type === 'daterange' || type === 'weekrange') {
- if (range.selecting) {
- if (range.startDate > newDate) {
- range.selecting = false
- onPick(newDate, range.startDate)
- } else {
- range.selecting = false
- onPick(range.startDate, newDate)
- }
- } else {
- range.selecting = true
- onPick(newDate, null)
- }
- } else {
- onPick(newDate)
- }
- }
- handlerMouseMove (e) {
- let td = e.target
- const {mouseMove, date, type, range} = this.props
- let {year, month} = deconstructDate(date)
- if (td.nodeName !== 'SPAN' || td.disabled || type.indexOf('range') === -1 || !range.selecting) return false
- td = td.parentNode.parentNode
- const day = parseInt(td.innerText)
- const cls = td.className
- let newDate = new Date(year, month - 1, day)
- if (cls.indexOf('prev') !== -1) {
- newDate = addMonths(newDate, -1)
- }
- if (cls.indexOf('next') !== -1) {
- newDate = addMonths(newDate, 1)
- }
- mouseMove(newDate)
- }
- getTDClass (td) {
- let _class = ['hi-datepicker-legacy__cell']
- if (td.disabled) {
- _class.push('disabled')
- return _class.join(' ')
- }
- switch (td.type) {
- case 'normal':
- _class.push('normal')
- break
- case 'today':
- this.props.type !== 'week' && _class.push('today')
- break
- case 'current':
- _class.push('current')
- break
- default:
- _class.push(td.type)
- break
- }
- (td.range && _class.push('in-range'))
- if (td.rangeStart || td.rangeEnd) {
- _class.push('range-se')
- }
- return _class.join(' ')
- }
- getWeeks () {
- const {weekOffset, localeDatas} = this.props
- const week = localeDatas.datePicker.week
-
- return week.slice(weekOffset).concat(week.slice(0, weekOffset))
- }
-
- TRMouseOver (num) {
- const {type} = this.props
- if ((type === 'week' || type === 'weekrange') && this.weekNum !== num) {
- this.weekNum = num
- }
- }
- render () {
- const {type, data} = this.props
- const rows = data || this.getRows()
- return (
-
- {
- (type.indexOf('date') !== -1 || type.indexOf('week') !== -1 || type.indexOf('timeperiod') !== -1) && (
-
-
- )
- }
-}
-
-Calender.defaultProps = {
- weekOffset: 0
-}
-export default Provider(Calender)
diff --git a/components/date-picker/datepicker-legacy/DatePanel.js b/components/date-picker/datepicker-legacy/DatePanel.js
deleted file mode 100644
index 875a759df..000000000
--- a/components/date-picker/datepicker-legacy/DatePanel.js
+++ /dev/null
@@ -1,305 +0,0 @@
-import React, {Component} from 'react'
-import Calender from './Calender'
-import {deconstructDate} from './util'
-import TimePanel from './TimePanel'
-import Icon from '../../icon'
-import classNames from 'classnames'
-import Provider from '../../context'
-import TimePeriodPanel from './TimePeriodPanel'
-import {dateFormat, parseISO, addHours} from './dateUtil'
-
-class DatePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- date: props.date,
- currentView: props.type,
- yearData: [],
- monthData: []
- }
- }
- componentWillReceiveProps (nextProps) {
- this.setState({
- date: nextProps.date
- })
- }
- /**
- * 改变月份事件
- * @param {Number} num 加减值
- */
- changeMonth (flag) {
- let {date} = this.state
- let {year, month} = deconstructDate(date)
- if (flag) {
- month -= 1
- if (month < 0) {
- month = 12
- year -= 1
- }
- } else {
- month += 1
- if (month > 12) {
- month = 1
- year += 1
- }
- }
- date.setFullYear(year)
- date.setMonth(month - 1)
- this.setState({
- date
- })
- }
- /**
- * 改变年份事件
- * @param {Number} num 加减值
- */
- changeYear (flag) {
- let {date, currentView} = this.state
- let {year} = deconstructDate(date)
- const num = currentView === 'year' ? 10 : 1
- if (flag) {
- year -= num
- } else {
- year += num
- }
- date.setFullYear(year)
- this.setState({
- date
- })
- }
- renderInput () {
- return (
- {
- this.setState({
- show: !this.state.show
- })
- }}
- value={this.state.value}
- />
- )
- }
- getYearOrMonthData (val, type) {
- const start = type === 'year' ? val - 4 : 1
- let trs = [[], [], [], []]
- let num = 0
- const currentYear = new Date().getFullYear()
- const currentMonth = new Date().getMonth()
- for (let i = 0; i < 4; i++) {
- let row = trs[i]
- for (let j = 0; j < 3; j++) {
- let col = row[j] || (row[j] = {type: 'normal'})
- const y = start + num
- if (y === currentYear || y === (currentMonth + 1)) {
- col.type = 'today'
- }
- if (y === val) {
- col.type = 'current'
- }
- type === 'year' ? col.text = y : col.text = this.props.localeDatas.datePicker.month[y - 1]
- col.value = y
- num++
- }
- }
- return trs
- }
- /**
- * Header 中间部分内容
- * @param {String} type 选择器类型
- * @param {Number} year 当前年份
- * @param {Number} month 当前月份
- */
- getHeaderCenterContent () {
- const { localeDatas, locale } = this.props
- const {date, currentView} = this.state
- const {year, month} = deconstructDate(date)
- if (currentView === 'year') {
- return (year - 4) + '~' + (year + 7)
- }
- let arr = [localeDatas.datePicker.monthShort[month - 1]]
- if (locale === 'zh-CN') {
- arr.unshift(year + '年 ')
- } else {
- arr.push(` ${year}`)
- }
- return arr
- }
- /**
- * 渲染 Header 部分（包含箭头快捷操作）
- * @param {Object} args {
- * year: 当前年份
- * month: 当前月份
- * type: 选择器类型
- * num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
- * }
- */
- renderHeader (type, value) {
- return (
- {
- this.changeDay(data.value)
- }}
- />)
- break
- }
- return component
- }
-
- render () {
- const {date, currentView} = this.state
- const {theme, showTime, type, timeInterval} = this.props
- const _c = classNames(
- 'hi-datepicker-legacy',
- theme && 'theme__' + theme
- )
- const bodyCls = classNames(
- 'hi-datepicker-legacy__body',
- showTime && 'hi-datepicker-legacy__body--hastime',
- type === 'timeperiod' && 'hi-datepicker-legacy__body--period'
- )
- return (
-
+
+ )
+}
+
+export default Root
diff --git a/components/date-picker/components/Time.jsx b/components/date-picker/components/Time.jsx
new file mode 100644
index 000000000..e2f310872
--- /dev/null
+++ b/components/date-picker/components/Time.jsx
@@ -0,0 +1,178 @@
+import React, { useContext, useCallback } from 'react'
+import TimeList from './TimeList'
+import DPContext from '../context'
+import moment from 'moment'
+import { deconstructDate } from '../utils'
+
+const Time = ({ date, onChange, timeRangePanelType, startDate }) => {
+ const {
+ localeDatas,
+ format = 'HH:mm:ss',
+ disabledHours = () => [],
+ disabledMinutes = () => [],
+ disabledSeconds = () => [],
+ hourStep = 1,
+ minuteStep = 1,
+ secondStep = 1
+ } = useContext(DPContext)
+ const isShowHMS = () => {
+ return {
+ hour: format.indexOf('H') > -1 || format.indexOf('h') > -1,
+ minute: format.indexOf('m') > -1,
+ second: format.indexOf('s') > -1
+ }
+ }
+ const { hours: lHours, minutes: lMinutes, seconds: lSeconds } = localeDatas.datePicker
+ const { hour: showHour, minute: showMinute, second: showSecond } = isShowHMS()
+ // 设置Date的选中状态
+ const setDisableTime = (type, i, disabledTime = []) => {
+ let isDisabled = disabledTime.includes(i)
+
+ if (timeRangePanelType === 'right') {
+ const { hour, minute, second } = deconstructDate(startDate)
+ const { hour: endHour, minute: endMinute } = date ? deconstructDate(date) : deconstructDate(new Date())
+
+ isDisabled = type === 'hour' && hour > i
+ if (type === 'minute') {
+ if (endHour === hour) {
+ isDisabled = minute > i
+ }
+ if (endHour < hour) {
+ isDisabled = true
+ }
+ }
+
+ if (type === 'second') {
+ if (endHour === hour) {
+ isDisabled = endMinute === minute && second > i
+ if (endMinute < minute) {
+ isDisabled = true
+ }
+ }
+ if (endHour < hour) {
+ isDisabled = true
+ }
+ }
+ }
+ return isDisabled
+ }
+ const getStep = (type) => {
+ let step = 1
+ const directionStep = 1
+ switch (type) {
+ case 'hour':
+ step = hourStep || directionStep
+ break
+ case 'minute':
+ step = minuteStep || directionStep
+ break
+ case 'second':
+ step = secondStep || directionStep
+ break
+ default:
+ step = 1
+ break
+ }
+ return step
+ }
+ const generateDatas = (type) => {
+ let count
+ const datas = []
+ const currentDate = deconstructDate(date)
+ const step = getStep(type)
+ const disabledList = _getDsiabledList()
+ const disabledTime = disabledList[type]
+ if (type === 'hour') {
+ count = 24
+ } else if (type === 'minute') {
+ count = 60
+ } else {
+ count = 60
+ }
+ for (let i = 0; i < count; i += 1) {
+ if (i % step === 0 || i === 0) {
+ datas.push({
+ value: i,
+ text: i < 10 ? '0' + i : i.toString(),
+ disabled: setDisableTime(type, i, disabledTime),
+ current: i === currentDate[type]
+ })
+ }
+ }
+ return datas
+ }
+
+ const _getDsiabledList = () => {
+ const currentDate = deconstructDate(date)
+ return {
+ hour: Object.prototype.toString.call(disabledHours) === '[object Array]' ? disabledHours : disabledHours() || [],
+ minute:
+ Object.prototype.toString.call(disabledMinutes) === '[object Array]'
+ ? disabledMinutes
+ : disabledMinutes(currentDate.hour) || [],
+ second:
+ Object.prototype.toString.call(disabledSeconds) === '[object Array]'
+ ? disabledSeconds
+ : disabledSeconds(currentDate.hour, currentDate.minute) || []
+ }
+ }
+ const whenDisableChange = (list, val, arrowVal) => {
+ let _value = val + arrowVal
+ while (list.includes(_value)) {
+ _value += arrowVal
+ }
+ return _value
+ }
+ const selectedEvent = useCallback(
+ (type, value, arrow) => {
+ const cDate = moment(date)
+ const disabledList = _getDsiabledList()[type]
+ if (disabledList.includes(value) && arrow) {
+ value = whenDisableChange(disabledList, value, arrow)
+ }
+ cDate[type](value)
+ if (!cDate.isSame(date)) {
+ onChange(cDate)
+ }
+ },
+ [date]
+ )
+ const renderTimeList = (type) => {
+ const disabledList = _getDsiabledList()[type]
+ const dDate = deconstructDate(date)
+ const isShow = isShowHMS()[type]
+ if (!isShow) {
+ return null
+ }
+ return (
+
+
+ {renderRange && (
+
+ {localeDatas.datePicker.to}
+
+
+ )}
+
+
+
+ )
+}
+
+export default Time
diff --git a/components/date-picker/components/TimeList.jsx b/components/date-picker/components/TimeList.jsx
new file mode 100644
index 000000000..960553afc
--- /dev/null
+++ b/components/date-picker/components/TimeList.jsx
@@ -0,0 +1,132 @@
+import React, { useState, useRef, useEffect } from 'react'
+import classNames from 'classnames'
+import Icon from '../../icon/index'
+
+const PREFIXCOUNT = [1, 2, 3]
+const PREFIX = PREFIXCOUNT.map((item, index) => {
+ return
+})
+const SUFFIX = PREFIXCOUNT.map((item, index) => {
+ return
+})
+const TimeList = ({ type, datas, value, disabledList, onSelect, hourStep, minuteStep, secondStep }) => {
+ const listRef = useRef(null)
+ const timeRef = useRef(null)
+ const topValue1 = useRef(null)
+ const topValue2 = useRef(null)
+ const [showArrow, setShowArrow] = useState(false)
+ const clickEvent = (e) => {
+ e.stopPropagation()
+ const li = e.target
+ if (li.nodeName !== 'LI') return false
+ if (!li.textContent) return
+ !getdisabledType(parseInt(li.textContent)) && onSelect(type, parseInt(li.textContent), e)
+ }
+ const isScrollStop = (val, el) => {
+ topValue2.current = el.scrollTop
+ if (topValue1.current === topValue2.current) {
+ el.scrollTop = val * 32
+ if (!disabledList.includes(val)) {
+ const arrow = getStep()
+ !getdisabledType(val) && onSelect(type, val * arrow)
+ }
+ }
+ }
+ const scrollTo = () => {
+ const arrow = getStep()
+ const padding = 32
+ const dVal = padding / arrow
+ listRef.current && (listRef.current.scrollTop = value * dVal)
+ }
+ useEffect(() => {
+ scrollTo()
+ }, [value])
+ const getdisabledType = (val) => {
+ let isDisabled = false
+ datas.forEach((data) => {
+ if (data.value === val) {
+ isDisabled = data.disabled
+ }
+ })
+ return isDisabled
+ }
+ const getStep = (direction) => {
+ const directionStep = direction && direction === 'up' ? -1 : 1
+ let step = directionStep
+
+ switch (type) {
+ case 'hour':
+ step = hourStep
+ break
+ case 'minute':
+ step = minuteStep
+ break
+ case 'second':
+ step = secondStep
+ break
+ default:
+ step = directionStep
+ break
+ }
+ if (Number.isNaN(step) || step === -1) {
+ step = 1
+ }
+ return step * directionStep
+ }
+ const scrollEvent = (e) => {
+ e.persist()
+ clearTimeout(timeRef.current)
+ const st = e.target.scrollTop
+ topValue1.current = st
+ const val = Math.round(st / 32)
+ if ((type === 'hour' && val > 23) || ((type === 'minute' || type === 'second') && val > 59)) {
+ return false
+ }
+ timeRef.current = setTimeout(() => isScrollStop(val, e.target), 200)
+ }
+ const renderArrow = () => {
+ return (
+
+ {showHour && {lHours}}
+ {showMinute && {lMinutes}}
+ {showSecond && {lSeconds}}
+
+
+ {renderTimeList('hour')}
+ {renderTimeList('minute')}
+ {renderTimeList('second')}
+
+
+ setShowArrow(true)}
+ onMouseLeave={() => setShowArrow(false)}
+ >
+
+ )
+}
+
+export default TimeList
diff --git a/components/date-picker/components/TimePanel.jsx b/components/date-picker/components/TimePanel.jsx
new file mode 100644
index 000000000..3085bf02c
--- /dev/null
+++ b/components/date-picker/components/TimePanel.jsx
@@ -0,0 +1,44 @@
+import React, { useContext } from 'react'
+import Time from './Time'
+import DPContext from '../context'
+import moment from 'moment'
+import classNames from 'classnames'
+
+const TimePanel = ({ hasShadow, onTimeChange, style, dates = [] }) => {
+ const { type, theme, hourStep, minuteStep, secondStep } = useContext(DPContext)
+ const panelCls = classNames(
+ 'hi-timepicker__panel',
+ `theme__${theme}`,
+ type.includes('range') && 'hi-timepicker__panel--range'
+ )
+ return (
+ - scrollEvent(e)}>
+ {PREFIX}
+ {datas.map((data, index) => {
+ const _class = classNames(
+ 'hi-timepicker__item',
+ data.current && 'hi-timepicker__item--current',
+ data.disabled && 'hi-timepicker__item--disabled'
+ )
+ return (
+
+ {
+
+ )
+}
+
+export default TimePanel
diff --git a/components/date-picker/components/TimePeriodPanel.jsx b/components/date-picker/components/TimePeriodPanel.jsx
new file mode 100644
index 000000000..f5f8218ac
--- /dev/null
+++ b/components/date-picker/components/TimePeriodPanel.jsx
@@ -0,0 +1,53 @@
+import React, { useRef, useContext, useState, useEffect } from 'react'
+import classNames from 'classnames'
+import { getTimePeriodData } from '../utils'
+import DPContext from '../context'
+
+const TimePeriodPanel = ({ date, onTimePeriodPick }) => {
+ const { timeInterval = 240, localeDatas } = useContext(DPContext)
+ const listEl = useRef(null)
+ const [periodData, setPeriodData] = useState([])
+ useEffect(() => {
+ setPeriodData(getTimePeriodData(timeInterval))
+ }, [])
+ const getActiveIndex = () => {
+ return timeInterval >= 60
+ ? (date.hour() * 60) / timeInterval
+ : (date.minute() + date.hour() * 60) / timeInterval
+ }
+ useEffect(() => {
+ setTimeout(() => {
+ listEl.current && (listEl.current.scrollTop = getActiveIndex() * 37)
+ }, 0)
+ }, [])
+ return (
+
+
+ )
+}
+
+export default TimePeriodPanel
diff --git a/components/date-picker/constants.js b/components/date-picker/constants.js
index f56ea9529..065ecfc00 100644
--- a/components/date-picker/constants.js
+++ b/components/date-picker/constants.js
@@ -1,43 +1,45 @@
-import {getYearWeek} from './util'
-import { isValid, dateFormat } from './dateUtil'
-export const TIME_BLOCK = {
- lineHeight: 22,
- padding: 8
-}
export const DAY_MILLISECONDS = 86400000
export const RANGE_SPLIT = '~'
-export const FORMATS = {
- date: 'yyyy-MM-dd',
- month: 'yyyy-MM',
- year: 'yyyy',
- time: 'HH:mm:ss',
- daterange: 'yyyy-MM-dd',
- week: 'yyyy',
- weekrange: 'yyyy',
- timeperiod: 'yyyy-MM-dd HH:mm:ss',
- monthrange: 'yyyy-MM',
- yearrange: 'yyyy'
-}
-
-export const isVaildDate = (date) => {
- return date && (date instanceof Date || date.startDate || typeof date === 'number')
+export const FORMATS = (locale) => {
+ return locale === 'zh-CN'
+ ? {
+ date: 'YYYY-MM-DD',
+ month: 'YYYY-MM',
+ year: 'YYYY',
+ time: 'HH:mm:ss',
+ timerange: 'HH:mm:ss',
+ daterange: 'YYYY-MM-DD',
+ week: 'YYYY-ww',
+ weekrange: 'YYYY-ww',
+ timeperiod: 'YYYY-MM-DD HH:mm:ss',
+ monthrange: 'YYYY-MM',
+ yearrange: 'YYYY'
+ }
+ : {
+ date: 'MM/DD/YYYY',
+ month: 'MM/YYYY',
+ year: 'YYYY',
+ time: 'HH:mm:ss',
+ timerange: 'HH:mm:ss',
+ daterange: 'MM/DD/YYYY',
+ week: 'ww/YYYY',
+ weekrange: 'ww/YYYY',
+ timeperiod: 'MM/DD/YYYY HH:mm:ss',
+ monthrange: 'MM/YYYY',
+ yearrange: 'YYYY'
+ }
}
-export const formatterDate = (type, date, formatter, showTime, localeDatas, weekOffset, isFormat) => {
- weekOffset = weekOffset || 0
- if (!isValid(date)) {
- return ''
- }
- date = new Date(date)
- let str = ''
- switch (type) {
- case 'weekrange':
- case 'week':
- str = localeDatas.datePicker.weekrange(date.getFullYear(), getYearWeek(date, weekOffset).weekNum)
- break
- default:
- str = dateFormat(date, formatter)
- break
- }
- return str
+export const INPUTTYPES = {
+ date: 'normal',
+ month: 'normal',
+ year: 'normal',
+ time: 'normal',
+ timerange: 'range',
+ daterange: 'range',
+ week: 'normal',
+ weekrange: 'range',
+ timeperiod: 'range',
+ monthrange: 'range',
+ yearrange: 'range'
}
diff --git a/components/date-picker/context.jsx b/components/date-picker/context.jsx
new file mode 100644
index 000000000..49d75fdcf
--- /dev/null
+++ b/components/date-picker/context.jsx
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const DPContext = React.createContext()
+
+export default DPContext
diff --git a/components/date-picker/dateUtil.js b/components/date-picker/dateUtil.js
deleted file mode 100644
index 2e7511092..000000000
--- a/components/date-picker/dateUtil.js
+++ /dev/null
@@ -1,139 +0,0 @@
-import getDaysInMonth from 'date-fns/getDaysInMonth'
-import subMonths from 'date-fns/subMonths'
-import getDay from 'date-fns/getDay'
-import startOfMonth from 'date-fns/startOfMonth'
-import isWithinInterval from 'date-fns/isWithinInterval'
-import isSameDay from 'date-fns/isSameDay'
-import compareAsc from 'date-fns/compareAsc'
-import startOfDay from 'date-fns/startOfDay'
-import endOfDay from 'date-fns/endOfDay'
-import parse from 'date-fns/parse'
-import toDate from 'date-fns/toDate'
-import startOfWeek from 'date-fns/startOfWeek'
-import endOfWeek from 'date-fns/endOfWeek'
-import format from 'date-fns/format'
-import addMonths from 'date-fns/addMonths'
-import isSameMonth from 'date-fns/isSameMonth'
-import getYear from 'date-fns/getYear'
-import getMonth from 'date-fns/getMonth'
-import isToday from 'date-fns/isToday'
-import getHours from 'date-fns/getHours'
-import getMinutes from 'date-fns/getMinutes'
-import getSeconds from 'date-fns/getSeconds'
-import addHours from 'date-fns/addHours'
-import addDays from 'date-fns/addDays'
-import subDays from 'date-fns/subDays'
-import differenceInDays from 'date-fns/differenceInDays'
-import dfIsValid from 'date-fns/isValid'
-import addYears from 'date-fns/addYears'
-import subYears from 'date-fns/subYears'
-import parseISO from 'date-fns/parseISO'
-import getDate from 'date-fns/getDate'
-import startOfYear from 'date-fns/startOfYear'
-import endOfYear from 'date-fns/endOfYear'
-import isSameYear from 'date-fns/isSameYear'
-import endOfMonth from 'date-fns/endOfMonth'
-import set from 'date-fns/set'
-
-const isValid = (date) => {
- if (typeof date === 'string') {
- return dfIsValid(parseISO(date))
- }
- if (typeof date === 'number') {
- return dfIsValid(toDate(date))
- }
- return (date && dfIsValid(toDate(date)))
-}
-const getValidDate = (date) => {
- return isValid(date) ? toDate(date) : new Date()
-}
-const getStartDate = (dateObj) => {
- return getValidDate(dateObj.startDate)
-}
-/**
- * 兼容 datefns 的 转换日期方法
- * @param {}} value
- * @param {*} format
- */
-const compatibleToDate = (value, format) => {
- if (typeof value === 'string') {
- return parse(value, format, new Date())
- }
- return toDate(value)
-}
-const compatibleFormatString = (formatStr) => {
- return formatStr.replace(/[Y+|D+]/g, (word) => {
- return word.toLowerCase()
- })
-}
-const dateFormat = (value, formatStr) => {
- return isValid(value) ? format(value, compatibleFormatString(formatStr)) : ''
-}
-/**
- * 箭头切换年份
- * @param {*} date
- * @param {*} flag
- */
-const changeYear = (date, flag, num = 1) => {
- let nDate
- if (flag) {
- nDate = subYears(date, num)
- } else {
- nDate = addYears(date, num)
- }
- return nDate
-}
-const changeMonth = (date, flag, num = 1) => {
- let nDate
- if (flag) {
- nDate = subMonths(date, num)
- } else {
- nDate = addMonths(date, num)
- }
- return nDate
-}
-
-export {
- getDaysInMonth, // 获取当月的天数
- subMonths, // 月份减法
- addMonths, // 月份加法
- addYears, // 年份加
- subYears, // 年份减
- getDay, // 获取周几
- getDate, // 获取具体期
- startOfMonth, // 指定日期月份的1日
- isWithinInterval, // 是否在指定日期范围内
- isSameDay, // 是否是同一天（忽略时分秒）
- compareAsc, // 比较两个日期
- startOfDay, // 一天的开始
- endOfDay, // 一天的结束
- parse, // 解析成日期
- startOfWeek, // 一周的开始
- endOfWeek, // 一周的结束
- dateFormat, // 格式化时间
- isSameMonth, // 是否是同一个月
- getYear, // 获取年
- getMonth, // 获取月
- isToday, // 是否是今天
- getHours, // 获取小时
- getMinutes, // 获取分钟
- getSeconds, // 获取秒
- addHours, // 小时加
- subDays, // 天减
- addDays, // 天加
- differenceInDays, // 相差多少天
- isValid, // 是否有效时间
- getStartDate, // 封装 - 获取开始时间
- getValidDate, // 获取有效的时间
- toDate,
- parseISO,
- compatibleToDate,
- compatibleFormatString,
- changeYear,
- changeMonth,
- startOfYear,
- endOfYear,
- isSameYear,
- endOfMonth,
- set
-}
diff --git a/components/date-picker/datepicker-legacy/BasePicker.js b/components/date-picker/datepicker-legacy/BasePicker.js
deleted file mode 100644
index 73818b95c..000000000
--- a/components/date-picker/datepicker-legacy/BasePicker.js
+++ /dev/null
@@ -1,346 +0,0 @@
-import React, {Component} from 'react'
-import Modal from './Modal'
-import classNames from 'classnames'
-import {formatterDate, FORMATS, isVaildDate} from './constants'
-
-import PropTypes from 'prop-types'
-import DatePickerType from './Type'
-
-import {startOfDay, endOfDay, toDate, startOfWeek, endOfWeek, dateFormat} from './dateUtil'
-import { addHours } from 'date-fns'
-class BasePicker extends Component {
- inputRoot = null
- input = null
- rInput = null
- constructor (props) {
- super(props)
- this.state = {
- showPanel: false,
- style: {},
- date: null,
- isFocus: false,
- // input 框内的显示的时间内容
- texts: ['', ''],
- placeholder: '',
- rText: '',
- leftPlaceholder: '',
- rightPlaceholder: '',
- format: ''
- }
- }
- setPlaceholder () {
- const {placeholder, localeDatas, type} = this.props
- const tempPlaceholder = localeDatas.datePicker.placeholders[type] || localeDatas.datePicker.placeholder
- let leftPlaceholder = tempPlaceholder
- let rightPlaceholder = tempPlaceholder
-
- if (placeholder instanceof Array) {
- leftPlaceholder = placeholder[0]
- rightPlaceholder = placeholder[1] || placeholder[0]
- } else if (typeof placeholder === 'string') {
- leftPlaceholder = placeholder
- rightPlaceholder = placeholder
- }
- this.setState({
- leftPlaceholder,
- rightPlaceholder
- })
- }
- static propTypes = {
- type: PropTypes.oneOf(Object.values(DatePickerType)),
- value: function (props, propName, componentName) {
- // Invalid Date
- const val = props[propName]
- if (val === undefined || val === null) {
- return null
- }
- if (val.start && val.end) {
- const _start = dateFormat(val.start)
- const _end = dateFormat(val.end)
- if (_start === 'Invalid Date' || _end === 'Invalid Date') {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed. start or end is an invalid date.`)
- }
- } else {
- if (dateFormat(val) === 'Invalid Date') {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. Validation failed. value is an invalid data.`)
- }
- }
- },
- onChange: PropTypes.func,
- format: PropTypes.string,
- showTime: PropTypes.bool,
- disabled: PropTypes.bool,
- showWeekNumber: PropTypes.bool,
- weekOffset: PropTypes.oneOf([0, 1]),
- timeInterval: function (props, propName, componentName) {
- const val = props[propName]
- if (val < 5 || val > 480 || (val > 60 && val % 60 !== 0) || (val < 60 && 60 % val !== 0)) {
- return new Error(`Invalid prop ${propName} supplied to ${componentName}. This value must be greater than 5 and less than 480 and is a multiple of 60.`)
- }
- }
- }
- static defaultProps = {
- type: 'date',
- disabled: false,
- showWeekNumber: true,
- weekOffset: 0,
- timeInterval: 240
- }
- _parseProps (props, callback) {
- let {value, showTime, type, format, localeDatas, weekOffset} = props
- format = format || FORMATS[type]
- let date = new Date() // 当前时间
- let noText = false
- /**
- * value 可能的格式：
- * '' | undefined | null | Date | String | Number | {start: xxx, end: xxx}
- */
- if (value === '' || !value) {
- // value 未传入情况
- date = new Date()
- noText = true
- }
- if (typeof value === 'number' || (typeof value === 'string' && value.trim().length > 4)) {
- // value 为数字（times）
- date = toDate(value)
- }
- if (value instanceof Date) {
- date = value
- }
-
- if (type.includes('range') || type === 'timeperiod') {
- if (value instanceof Date || !value) {
- // 如果为时间段选择，则取默认的第一个范围
- date = {startDate: startOfDay(date), endDate: type === 'timeperiod' ? addHours(startOfDay(date), 4) : endOfDay(date)}
- }
- if (value && value.start && value.end) {
- date = {startDate: value.start, endDate: value.end}
- }
- }
- const leftText = noText ? '' : formatterDate(type, date.startDate || date, format, showTime, localeDatas, weekOffset)
- const rightText = noText ? '' : formatterDate(type, date.endDate || date, format, showTime, localeDatas, weekOffset)
- this.setState({
- texts: [leftText, rightText],
- date,
- format
- }, () => {
- callback && callback(this.state.date)
- })
- }
- componentDidMount () {
- this._parseProps(this.props, (date) => {
- if (date.startDate && date.endDate) {
- date = ({start: new Date(date.startDate), end: new Date(date.endDate)})
- } else {
- date = new Date(date)
- }
- this.props.value && this.props.onChange && this.props.onChange(date)
- })
- this.setPlaceholder()
- let rect = this.inputRoot.getBoundingClientRect()
- this.calcPanelPos(rect)
- }
- calcPanelPos (rect) {
- const {showTime, type} = this.props
- let _w = type.indexOf('range') !== -1 ? 578 : 288
- let _h = 298
- if (type === 'daterange' && showTime) {
- _h = 344
- }
- const _cw = document.body.clientWidth || document.documentElement.clientWidth
- const _ch = document.body.clientHeight || document.documentElement.clientHeight
- const _st = document.body.scrollTop || document.documentElement.scrollTop
- let {left, width, top, height} = rect
- let _top = rect.top + rect.height + _st
- if (left + _w > _cw) {
- left = left + width - _w
- }
- if (top + _h + height > _ch) {
- _top = top - _h + _st
- }
- this.setState({
- style: {
- position: 'absolute',
- left: left,
- top: _top
- }
- })
- }
- componentWillReceiveProps (nextProps) {
- this._parseProps(nextProps)
- }
- onPick (date, showPanel) {
- const {type, showTime, localeDatas, weekOffset} = this.props
- const {format} = this.state
- this.setState({
- date,
- texts: [formatterDate(type, date.startDate || date, format, showTime, localeDatas, weekOffset), formatterDate(type, date.endDate, format, showTime, localeDatas, weekOffset)],
- showPanel,
- isFocus: false
- }, () => {
- if (!showPanel) {
- this.callback()
- }
- })
- }
- callback () {
- const {type, onChange, weekOffset} = this.props
- const {date} = this.state
- if (onChange) {
- const {startDate, endDate} = date
- const _weekOffset = {weekStartsOn: weekOffset}
- if (type === 'week') {
- onChange({start: startOfWeek(date, _weekOffset), end: endOfWeek(date, _weekOffset)})
- return
- }
- if (startDate && endDate) {
- if (type === 'weekrange') {
- onChange({start: startOfWeek(startDate, _weekOffset), end: endOfWeek(endDate, _weekOffset)})
- } else if (['timerange', 'timeperiod', 'daterange'].includes(type)) {
- onChange({start: startDate, end: endDate})
- } else {
- onChange({start: startOfDay(startDate), end: endOfDay(endDate)})
- }
- } else {
- onChange(date)
- }
- }
- }
- timeCancel () {
- const {tempDate, format} = this.state
- const {type, showTime, localeDatas, weekOffset} = this.props
- if (tempDate) {
- this.setState({
- date: new Date(tempDate),
- text: formatterDate(type, new Date(tempDate), format, showTime, localeDatas, weekOffset),
- showPanel: false
- })
- } else {
- this.setState({
- showPanel: false,
- isFocus: false
- })
- }
- }
- clickOutSide (e) {
- const tar = e.target
- if (tar.className.indexOf('clear') !== -1) {
- this.setState({
- texts: ['', ''],
- showPanel: false
- })
- return false
- }
- if (tar !== this.input && tar !== this.rInput) {
- this.timeCancel()
- }
- this.callback()
- }
- _input (text, ref = 'input', placeholder = 'Please Select...') {
- const {disabled, type, onChange} = this.props
-
- return (
- { this[ref] = el }}
- placeholder={placeholder}
- className={disabled ? 'disabled' : ''}
- disabled={disabled}
- onChange={e => {
- isVaildDate(new Date(e.target.value)) && type === 'date' && onChange(new Date(e.target.value))
- this.setState({
- text: e.target.value
- })
- }}
- onFocus={(e) => {
- this.setState({
- showPanel: true,
- isFocus: true
- })
- this.calcPanelPos(this.inputRoot.getBoundingClientRect())
- }}
- value={text}
- />
- )
- }
- _clear () {
- const {onChange} = this.props
- if (onChange) {
- onChange(null)
- }
- this.setState({texts: ['', ''], isFocus: false})
- }
- _icon () {
- const {isFocus} = this.state
- const iconCls = classNames(
- 'hi-datepicker-legacy__input-icon',
- 'hi-icon',
- isFocus ? 'icon-close-circle clear' : 'icon-date'
- )
- return isFocus
- ?
- : {
- if (this.props.disabled) return
- this.calcPanelPos(this.inputRoot.getBoundingClientRect())
- this.setState({showPanel: true, isFocus: true})
- }} />
- }
- renderRangeInput () {
- const {
- localeDatas,
- disabled,
- showTime
- } = this.props
- const _cls = classNames(
- 'hi-datepicker-legacy__input',
- 'hi-datepicker-legacy__input--range',
- showTime && 'hi-datepicker-legacy__input--range-time',
- disabled && 'hi-datepicker-legacy__input--disabled'
- )
- return (
-
+ {localeDatas.datePicker.timePeriod}
+
+
+
+ -
+ {periodData.map((item, index) => {
+ const cls = classNames(
+ 'hi-datepicker__period-item',
+ getActiveIndex() === index && 'hi-datepicker__period-item--active'
+ )
+ return (
+
- {this._input(this.state.texts[0], 'input', this.state.leftPlaceholder)}
- {localeDatas.datePicker.to}
- {this._input(this.state.texts[1], 'rInput', this.state.rightPlaceholder)}
- {this._icon()}
-
- )
- }
- renderNormalInput () {
- const {
- disabled,
- showTime
- } = this.props
- const _cls = classNames(
- 'hi-datepicker-legacy__input',
- 'hi-datepicker-legacy__input--normal',
- disabled && 'hi-datepicker-legacy__input--disabled',
- showTime && 'hi-datepicker-legacy__input--middle'
- )
- return (
-
- {this._input(this.state.texts[0], 'input', this.state.leftPlaceholder)}
- {this._icon()}
-
- )
- }
- render () {
- const {type, showTime} = this.props
- return (
- { this.inputRoot = el }} className='hi-datepicker-legacy__input-root'>
- {
- (type.indexOf('range') !== -1 || type === 'timeperiod') ? this.renderRangeInput() : this.renderNormalInput()
- }
- {
- this.state.showPanel ? (
- | {item} | - }) - } -
|---|
|
-
-
- {cell.text || cell.value}
-
-
- |
- )
- })
- }
-
-
- )
- }
- yearPick (date) {
- const {type, onPick} = this.props
- if (type === 'year') {
- onPick(date)
- } else {
- this.setState({
- date,
- currentView: 'month'
- })
- }
- }
- monthPick (_date) {
- const {type, onPick} = this.props
- let {date} = this.state
- if (type === 'month') {
- onPick(_date)
- } else {
- date.setFullYear(_date.getFullYear())
- date.setMonth(_date.getMonth())
- this.setState({
- date,
- currentView: 'date'
- })
- }
- }
- onDatePick (date) {
- const {type, showTime} = this.props
- const {hours, minutes, seconds} = deconstructDate(this.state.date)
- if (type === 'timeperiod') {
- this.props.onPick({startDate: date, endDate: addHours(this.state.date, 4)}, true)
- } else {
- date.setHours(hours, minutes, seconds)
- this.props.onPick(date, showTime)
- }
- }
- onTimePeriodPick (periodS, periodE) {
- const currentDate = dateFormat(this.state.date, 'yyyy-MM-dd')
- parseISO(`${currentDate} ${periodS}`)
- this.props.onPick({startDate: parseISO(`${currentDate} ${periodS}`), endDate: parseISO(`${currentDate} ${periodE}`)}, true)
- }
- onTimePick (date, bol) {
- this.setState({
- date
- })
- // if (showTime) {
- // this.setState({date})
- // } else {
- // this.props.onPick(date)
- // }
- this.props.onPick(date, bol)
- }
- _getNormalComponent () {
- const {currentView, date} = this.state
- const {minDate, maxDate, weekOffset} = this.props
- const {year, month} = deconstructDate(date)
- let component = null
- switch (currentView) {
- case 'date':
- case 'timeperiod':
- case 'week':
- component = (
- this.changeYear(true)} >
- this.setState({currentView: 'year'})}>
- {this.getHeaderCenterContent()}
-
-
- {
- (type !== 'month' && type !== 'year') && this.changeMonth(false)}>
-
-
- )
- }
-}
-
-export default Provider(DatePanel)
diff --git a/components/date-picker/datepicker-legacy/DatePicker.js b/components/date-picker/datepicker-legacy/DatePicker.js
deleted file mode 100644
index 543e350ff..000000000
--- a/components/date-picker/datepicker-legacy/DatePicker.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react'
-
-import BasePicker from './BasePicker'
-import DatePanel from './DatePanel'
-import DateRangePanel from './DateRangePanel'
-import WeekRangePanel from './WeekRangePanel'
-class DatePicker extends BasePicker {
- initPanel (state, props) {
- let component = null
- let d = state.date
- if (!d.startDate) {
- d = {startDate: d, endDate: null}
- }
- switch (props.type) {
- case 'month':
- case 'year':
- case 'week':
- case 'date':
- component = (
-
-
-
- {currentView !== 'time' && this.renderHeader(currentView, date)}
-
- {
- showTime &&
- {this._getNormalComponent()}
-
-
- {
-
- )
- }
- pick (startDate, endDate) {
- const {range} = this.state
- const {onPick, showTime} = this.props
- range.startDate = startDate
- range.endDate = endDate
- this.setState({
- range,
- leftDate: startDate || this.state.leftDate,
- rightDate: endDate || this.state.rightDate
- })
- if (endDate) {
- onPick(range, showTime)
- }
- }
- onMouseMoveHandler (date) {
- const {range} = this.state
- range.endDate = date
- this.setState({
- range
- })
- }
- shortcutsClickEvent (e) {
- const { localeDatas } = this.props
- const {range} = this.state
- const _date = new Date()
- const val = e.target.innerText
- let days = 0
- switch (val) {
- case localeDatas.datePicker.lastWeek:
- days = 7
- break
- case localeDatas.datePicker.lastMonth:
- days = 30
- break
- case localeDatas.datePicker.lastThreeMonth:
- days = 90
- break
- case localeDatas.datePicker.lastYear:
- days = 365
- break
- }
- const nDate = new Date(_date.getTime() - days * DAY_MILLISECONDS)
- range.startDate = nDate
- range.endDate = _date
- this.props.onPick(range)
- }
- renderShortcut (shortcuts) {
- return (
-
- this.changeYear(true, lr)} >
- }
-
- {this.getHeaderCenterContent(year, month)}
-
- {
-
- {
- type.indexOf('date') !== -1 && this.changeMonth(false, lr)} >
- }
-
- {
- shortcuts.map((m, n) => {
- return (
-
- )
- }
- onTimePick (pos, date) {
- const {range} = this.state
- pos === 'leftDate' && (range.startDate = date)
- pos === 'rightDate' && (range.endDate = date)
- this.setState({
- [pos]: date
- })
- }
-
- getRangeDateStr () {
- let {leftDate, rightDate, showMask} = this.state
- const format = 'HH:mm:ss'
- const cls = classNames(
- showMask && 'hi-datepicker-legacy__time-text'
- )
- return (
-
- {`${dateFormat(leftDate, format)} - ${dateFormat(rightDate, format)}`}
-
- )
- }
- selectTimeEvent () {
- this.setState({
- showMask: !this.state.showMask
- })
- }
- render () {
- let {minDate, maxDate, currentView, range, leftDate, rightDate, showMask} = this.state
- // const rightDate = nextMonth(leftDate)
- const {shortcuts, theme, showTime, date} = this.props
- const _c = classNames(
- 'hi-datepicker-legacy',
- theme && 'theme__' + theme
- )
- const bodyCls = classNames(
- 'hi-datepicker-legacy__body',
- 'hi-datepicker-legacy__body--range',
- shortcuts && 'hi-datepicker-legacy__body--shortcuts'
- )
- return (
- - {m} -
- ) - }) - } -
-
- this.scrollPageUp(type)}>
-
- )
- }
- render () {
- const { localeDatas } = this.props
- const { hours: lHours, minutes: lMinutes, seconds: lSeconds } = localeDatas.datePicker
- const {date, hoursArrow, minutesArrow, secondsArrow} = this.state
- const {hours, minutes, seconds} = deconstructDate(date)
- this.liPrefix = this.liPrefix.map((item, index) => {
- return
- })
- this.liSuffix = this.liSuffix.map((item, index) => {
- return
- })
- return (
-
+export default DatePicker
diff --git a/components/date-picker/index.js b/components/date-picker/index.js
deleted file mode 100644
index c2c60cdfc..000000000
--- a/components/date-picker/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import DatePicker from './DatePicker'
-import { dateFormat } from './dateUtil'
-import './style/index'
-
-DatePicker.format = dateFormat
-
-export default DatePicker
diff --git a/components/date-picker/index.jsx b/components/date-picker/index.jsx
new file mode 100644
index 000000000..4088ba8c1
--- /dev/null
+++ b/components/date-picker/index.jsx
@@ -0,0 +1,8 @@
+import BasePicker from './BasePicker'
+import TimePicker from './TimePicker'
+import moment from 'moment'
+BasePicker.format = (date, format) => {
+ return moment(date).format(format)
+}
+export default BasePicker
+export { TimePicker }
diff --git a/components/date-picker/local.js b/components/date-picker/local.js
deleted file mode 100644
index 5377c6b8f..000000000
--- a/components/date-picker/local.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
- month: [ '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二' ],
- week: [ '日', '一', '二', '三', '四', '五', '六' ]
-}
diff --git a/components/date-picker/style/index.js b/components/date-picker/style/index.js
index 34ed1fc38..63810a681 100644
--- a/components/date-picker/style/index.js
+++ b/components/date-picker/style/index.js
@@ -1,2 +1 @@
import './index.scss'
-// import './timepicker.scss'
diff --git a/components/date-picker/style/index.scss b/components/date-picker/style/index.scss
index 9c80aed01..4aa85cead 100644
--- a/components/date-picker/style/index.scss
+++ b/components/date-picker/style/index.scss
@@ -1,154 +1,176 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
-$basic-color: #4284f5 !default;
-$error-color: #f44141 !default;
+$error-color: get-color($palette-secondary, 'danger') !default;
.hi-datepicker {
position: relative;
- // display: flex;
- background: #fff;
+ background: use-color('white');
z-index: 1060;
- font-size: 14px;
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
- .hi-datepicker__indiaHoli {
- display: none;
- position: absolute;
- top: 36px;
- left: 0;
- width: 430px;
- text-align: center;
+ &__popper {
+ width: 288px;
+ font-size: 14px;
+ background: use-color('white');
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+ display: flex;
+ flex-wrap: wrap;
- &-text {
- display: inline-block;
- max-width: 410px;
- word-break: break-all;
- background: #edf2fc;
- border: 1px solid #d8e5ff;
- padding: 7px 12px;
- border-radius: 2px;
- }
+ &--range {
+ width: 576px;
- &-enter {
- display: none;
- opacity: 0;
- transition: all 0.3s ease-in;
+ &.hi-datepicker__popper--large {
+ width: 866px;
+ }
}
- &-enter-done {
- display: block;
- opacity: 1;
- transition: all 0.3s ease-in;
+ &--timeperiod,
+ &--large {
+ width: 432px;
}
- &-exit {
- display: block;
- opacity: 1;
+ &--time {
+ width: 468px;
}
- &-exit-done {
- display: none;
- opacity: 0;
- transition: all 0.3s ease-in;
+ &--shortcuts {
+ width: 681px;
}
}
- &__input-root {
- display: inline-block;
+ &__root {
+ display: inline-flex;
}
- &__input {
- background: #fff;
- border: 1px solid #d8d8d8;
+ &__picker {
+ background: use-color('white');
+ border: 1px solid use-color('gray-30');
border-radius: 2px;
height: 32px;
width: 180px;
- display: flex;
+ display: inline-flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
- &--error {
- border: 1px solid $error-color;
- }
-
- &:hover:not(.hi-datepicker__input--disabled,.hi-datepicker__input--error) {
- border: 1px solid $basic-color;
+ &:hover:not(.hi-datepicker__picker--disabled):not(.hi-datepicker__picker--error) {
+ border: 1px solid use-color('primary');
}
&--focus {
- border: 1px solid $basic-color;
+ border: 1px solid use-color('primary');
}
- .icon-close-circle {
- color: #bbb;
+ &--error {
+ border: 1px solid $error-color;
}
- .icon-close-circle:hover {
- color: #333;
+ &--disabled {
+ background: rgba(242, 242, 242, 1);
}
- &--range {
+ &--daterange,
+ &--weekrange,
+ &--yearrange,
+ &--timerange,
+ &--monthrange {
width: 320px;
- &-time {
+ input {
+ text-align: center;
+ }
+
+ &.hi-datepicker__picker--hastime {
width: 400px;
}
+ }
+
+ &--timeperiod {
+ width: 400px;
input {
- flex: 0 1 40%;
text-align: center;
}
}
+ &--hastime {
+ width: 240px;
+ }
+
+ .hi-icon {
+ margin-top: 2px;
+ margin-right: 8px;
+ font-size: 14px;
+ cursor: pointer;
+
+ &--disabled {
+ cursor: not-allowed;
+ color: rgba(204, 204, 204, 1);
+ }
+ }
+
+ .icon-close-circle {
+ color: use-color('gray-50');
+ }
+
+ .icon-close-circle:hover {
+ color: use-color('black');
+ }
+
input {
outline: none;
border: 0;
- min-width: 0;
- min-height: 0;
height: 28px;
padding-left: 10px;
- flex: 1;
+ width: 100%;
&::-webkit-input-placeholder {
- color: #ccc;
+ color: use-color('gray-50');
}
- }
-
- &--connection {
- height: 30px;
- line-height: 32px;
- }
- &--disabled {
- .hi-datepicker__input-icon,
- input,
- span {
+ &.disabled {
cursor: not-allowed;
- background: #f4f4f4;
- color: rgba(44, 48, 78, 0.2);
+ background: rgba(242, 242, 242, 1);
}
}
+ }
- &--middle {
- width: 240px;
- }
+ &__input {
+ display: inline-flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 100%;
}
- &__input-icon {
- height: 100%;
- flex: 0 0 32px;
- line-height: 32px;
- text-align: center;
- box-sizing: border-box;
- cursor: pointer;
+ &__panel {
+ // width: 288px;
+ width: 100%;
+ // height: 296px;
+ background: use-color('white');
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+ display: flex;
+
+ .hi-datepicker__panel--left {
+ min-width: 288px;
+ flex: 1;
+ }
+
+ .hi-datepicker__panel--right {
+ flex: 1;
+ }
+
+ &--noshadow {
+ box-shadow: none;
+ }
}
&__header {
- border-bottom: 1px solid #f2f2f2;
+ border-bottom: 1px solid use-color('gray-30');
display: flex;
justify-content: space-between;
- height: 47px;
+ height: 48px;
+ box-sizing: border-box;
align-items: center;
padding: 0 12px;
@@ -160,12 +182,10 @@ $error-color: #f44141 !default;
.hi-icon {
cursor: pointer;
flex: 1;
- }
- .hi-icon:hover {
- cursor: pointer;
- flex: 1;
- color: #4284f5;
+ &:hover {
+ color: use-color('primary');
+ }
}
}
@@ -175,143 +195,237 @@ $error-color: #f44141 !default;
}
}
- &__body {
- background: #fff;
- border-radius: 4px;
- box-sizing: border-box;
- width: 288px;
+ &__calender-wrap {
+ padding: 16px;
+ height: 248px;
&--large {
- width: 432px;
+ height: 382px;
}
+ }
- &--hastime {
- width: 468px;
- display: flex;
+ &__calender {
+ width: 100%;
+ height: 100%;
+ font-size: 14px;
+ border-collapse: collapse;
+ border-spacing: 0;
+
+ thead th {
+ padding: 2px;
+ }
- .hi-datepicker__body--large {
- width: 611px;
+ &--year,
+ &--month {
+ .hi-datepicker__row {
+ height: 52px;
}
- .hi-timepicker {
- box-shadow: none;
- border-left: 1px solid #f2f2f2;
+ .hi-datepicker__cell {
+ &-text {
+ width: 48px;
+ }
}
}
+ }
- &--period {
- display: flex;
- width: 432px;
+ &__row {
+ &--currentweek {
+ .hi-datepicker__cell {
+ &::before {
+ content: '';
+ background: use-color('primary-20');
+ display: block;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
}
+ }
- &--range {
- width: 578px;
- display: flex;
- border: none;
-
- &--large {
- width: 866px;
+ &__cell {
+ text-align: center;
+ padding: 4px 0;
+ cursor: pointer;
+ color: rgb(51, 51, 51);
+ position: relative;
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
+ &-text {
+ width: 24px;
+ display: inline-block;
+ height: 24px;
+ line-height: 24px;
+ border-radius: 2px;
+ box-sizing: border-box;
+ margin-left: 50%;
+ transform: translateX(-50%);
+ }
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
+ &__cell:not(.hi-datepicker__cell--range) {
+ &-text {
+ &:hover {
+ background-color: use-color('primary-20');
+ }
+ }
+ }
- .hi-datepicker__text——holiday {
- color: #fff;
+ &--out {
+ color: rgba(44, 48, 78, 0.2);
+ }
- &--work {
- color: #fff;
- }
- }
+ &--today {
+ .hi-datepicker__cell-text {
+ border: 1px solid use-color('primary');
+ }
+ }
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
+ &--range:not(.hi-datepicker__cell--out) {
+ &::before {
+ content: '';
+ background: use-color('primary-20');
+ display: block;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
- .hi-datepicker__content {
- background: none;
- color: #fff;
- }
- }
+ &--disabled {
+ color: rgba(44, 48, 78, 0.2);
+ cursor: not-allowed;
- &.today {
- background: none;
+ &::before {
+ content: '';
+ display: block;
+ height: 24px;
+ position: absolute;
+ left: 0;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+ background: rgba(140, 140, 140, 0.1);
+ }
+ }
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
- opacity: 1;
- border: none;
- }
- }
- }
+ &--large {
+ .hi-datepicker__cell-text {
+ width: 48px;
+ height: 48px;
+ line-height: normal;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ font-size: 16px;
}
- .hi-datepicker__panel {
- flex: 1;
+ &.hi-datepicker__cell--range:not(.hi-datepicker__cell--out) {
+ &::before {
+ height: 48px;
+ }
}
}
- &--shortcuts {
- width: 683px;
+ &--selected {
+ .hi-datepicker__cell-text {
+ background: use-color('primary');
+ color: use-color('white');
+ }
- &--large {
- width: 970px;
+ .hi-datepicker__cell--lunar {
+ color: use-color('white');
+ }
- .hi-datepicker__panel {
- width: 432px;
- }
+ .hi-datepicker__lunar {
+ color: use-color('white');
+ }
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
+ .hi-datepicker__mark--rest {
+ color: use-color('white');
+ }
+ }
+ }
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
+ &__cellnum {
+ display: inline-block;
+ transition: all 100ms;
- .hi-datepicker__text——holiday {
- color: #fff;
+ &:hover {
+ transform: scale(1.1);
+ }
+ }
- &--work {
- color: #fff;
- }
- }
+ &__lunar {
+ font-size: 12px;
+ color: rgba(204, 204, 204, 1);
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
+ &--highlight {
+ color: use-color('primary');
+ }
+ }
- .hi-datepicker__content {
- background: none;
- color: #fff;
- }
- }
+ &__footer {
+ height: 48px;
+ border-top: 1px solid use-color('gray-10');
+ box-sizing: border-box;
+ line-height: 48px;
+ text-align: center;
+ cursor: pointer;
+ position: relative;
+ font-size: 14px;
+ flex: 1 1 100%;
- &.today {
- background: none;
+ &:not(.hi-datepicker__footer--disable):hover {
+ color: use-color('primary');
+ }
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
- opacity: 1;
- border: none;
- }
- }
- }
- }
+ &--disable {
+ cursor: not-allowed;
+ color: use-color('gray-50');
}
}
+ &__mask {
+ width: 100%;
+ height: 100%;
+ background: rgba(0, 0, 0, 0.4);
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+
+ &__timetext {
+ position: absolute;
+ width: 148px;
+ height: 32px;
+ border-radius: 2px;
+ left: 50%;
+ top: 8px;
+ transform: translateX(-50%);
+ background: use-color('white');
+ z-index: 2;
+ line-height: 32px;
+ }
+
&__time-period {
width: 144px;
- border-left: 1px solid #f2f2f2;
+ border-left: 1px solid use-color('gray-10');
text-align: center;
+ box-sizing: border-box;
+ font-size: 14px;
}
&__period-header {
line-height: 48px;
height: 48px;
font-weight: 600;
- border-bottom: 1px solid #f2f2f2;
+ border-bottom: 1px solid use-color('gray-10');
box-sizing: border-box;
}
@@ -333,1107 +447,91 @@ $error-color: #f44141 !default;
}
&--active {
- color: $basic-color;
+ color: use-color('primary');
}
}
- &__footer {
- height: 48px;
- border-top: 1px solid #f2f2f2;
+ &__shortcuts {
+ background: use-color('white');
+ border-right: 1px solid use-color('gray-10');
+ width: 105px;
box-sizing: border-box;
- line-height: 48px;
- text-align: center;
- cursor: pointer;
- position: relative;
+ overflow: hidden;
- &:hover {
- color: $basic-color;
+ &-list {
+ width: 120px;
+ padding: 0;
+ height: 100%;
+ margin: 0;
+ overflow: auto;
+ }
+
+ &-item {
+ cursor: pointer;
+ padding-left: 30px;
+ margin: 21px 0;
+ list-style: none;
+
+ &:hover {
+ color: use-color('primary');
+ }
}
}
- &__mask {
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.4);
+ &__mark {
position: absolute;
- top: 0;
- left: 0;
+ font-size: 12px;
+ right: 0;
+ top: -2px;
+
+ &--rest {
+ color: rgba(29, 166, 83, 1);
+ }
+
+ &--work {
+ color: rgba(244, 65, 65, 1);
+ }
}
- &__time-text {
+ &__indiaHoli {
+ display: none;
position: absolute;
- width: 148px;
- height: 32px;
- border-radius: 2px;
- left: 50%;
- top: 8px;
- transform: translateX(-50%);
- background: #fff;
- z-index: 2;
- line-height: 32px;
- }
-
- &__calender-container {
- padding: 17px 18px 15px;
-
- &--date {
- .hi-datepicker__cell {
- &.today:not(.in-range) {
- &:not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- width: 24px;
- height: 24px;
- box-sizing: border-box;
- }
- }
- }
-
- &.current:not(.in-range) {
- &:not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- width: 24px;
- height: 24px;
- border-radius: 2px;
- }
- }
- }
- }
-
- .hi-datepicker__cell.in-range:not(.range-se):not(.prev):not(.next) {
- padding: 4px 0;
-
- .hi-datepicker__content__wrap {
- width: 100%;
- background: rgba(66, 142, 245, 0.1);
-
- .hi-datepicker__content {
- background: none;
- }
- }
- }
- }
-
- &--year,
- &--month {
- padding: 10px 5px;
-
- .hi-datepicker__row {
- height: 57px;
- }
-
- .hi-datepicker__cell {
- width: 92px;
- padding-left: 24px;
-
- &.today {
- .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- background: $basic-color;
- opacity: 1;
- color: #fff;
- }
- }
- }
-
- &:not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap {
- width: 48px;
-
- .hi-datepicker__content {
- width: 48px;
- }
- }
- }
- }
-
- &--year {
- .hi-datepicker__cell {
- width: 92px;
- padding-left: 24px;
-
- &--large {
- width: 160px;
- padding-left: 38px;
-
- .hi-datepicker__content__wrap {
- width: 56px;
- }
- }
- }
- }
-
- &--month {
- .hi-datepicker__cell {
- &--large {
- padding-left: 48px;
-
- .hi-datepicker__content__wrap {
- width: 52px;
- height: 24px;
- }
-
- .hi-datepicker__content--showLunar {
- padding-bottom: 0;
- }
- }
- }
- }
-
- &--week {
- .hi-datepicker__row {
- .hi-datepicker__cell:not(.range-se) .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- width: 100%;
- }
-
- // &:hover {
- // .hi-datepicker__content {
- // background: rgba(66, 132, 245, 0.1);
- // }
- // }
- }
-
- &:not(.hi-datepicker__row--current-week):hover {
- // .hi-datepicker__cell:not(.range-se) {
- // padding: 4px 0;
-
- // .hi-datepicker__content__wrap {
- // width: 100%;
- // }
- // }
- td .hi-datepicker__content__wrap {
- background: rgba(66, 132, 245, 0.1);
- }
-
- .hi-datepicker__content__wrap:hover {
- .hi-datepicker__content:hover {
- background: none;
- }
- }
- }
-
- &--current-week {
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
-
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
- }
- }
-
- .hi-datepicker__cell.in-range.hi-datepicker__cell--large:not(.range-se) {
- padding: 4px 0;
-
- .hi-datepicker__content__wrap {
- width: 100%;
- }
- }
- }
- }
- }
- }
-
- &__calender {
- border: 0;
- width: 100%;
- border-collapse: separate;
- border-spacing: 0;
-
- th {
- line-height: 24px;
- padding: 0;
- }
- }
-
- &__row {
- &::after {
- content: '';
- }
-
- &--current-week {
- .range-se {
- .hi-datepicker__content {
- background: $basic-color;
- }
- }
- }
- }
-
- // &__content {
- // margin: 0 3px;
- // background: #fff;
- // color: #fff;
- // border-radius: 2px;
- // }
-
- &__cell {
- cursor: pointer;
+ top: 36px;
+ left: 0;
+ width: 430px;
text-align: center;
- padding: 4px 0;
- width: 36px;
-
- &.disabled {
- .hi-datepicker__content {
- cursor: not-allowed;
- color: map-get(get-palette($basic-color), 'g80');
- background: rgba(246, 246, 246, 1);
- }
-
- &:first-child {
- .hi-datepicker__content {
- border-radius: 2px;
- }
- }
-
- &:last-child {
- .hi-datepicker__content {
- border-radius: 2px;
- }
- }
- }
-
- &.hi-datepicker__cell--large {
- position: relative;
-
- .hi-datepicker__content__wrap {
- border-radius: 2px;
-
- &:hover {
- background-color: rgba(66, 142, 245, 0.1);
- }
- }
- }
-
- &:not(.hi-datepicker__cell--large):not(.disabled) {
- .hi-datepicker__content {
- margin: auto;
- width: 24px;
- &:hover {
- background-color: rgba(66, 142, 245, 0.1);
- }
- }
- }
-
- &:not(.in-range) {
- .hi-datepicker__content {
- border-radius: 2px;
- }
- }
-
- &.range-se:not(.prev):not(.next):not(.hi-datepicker__cell--large) {
- .hi-datepicker__content__wrap {
- &:hover {
- background-color: rgba(66, 142, 245, 0.1);
- }
- }
-
- .hi-datepicker__content {
- // margin: 0 3px;
- background: $basic-color;
- color: #fff;
- border-radius: 2px;
- }
- }
-
- &--large {
- width: 48px;
- height: 48px;
- padding: 4px;
-
- &.disabled {
- padding: 4px 0;
-
- .hi-datepicker__content__wrap {
- width: 56px;
- color: #a8aaaf;
- background: #f6f6f6;
- }
- }
-
- &--laster {
- padding: 0 4px;
- }
-
- .hi-datepicker__content__wrap {
- width: 48px;
- height: 48px;
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
- }
- }
-
- .hi-datepicker__content--showLunar {
- padding-bottom: 3px;
- overflow: hidden;
+ &-text {
+ display: inline-block;
+ max-width: 410px;
+ word-break: break-all;
+ background: use-color('primary-10');
+ border: 1px solid #d8e5ff;
+ padding: 7px 12px;
+ border-radius: 2px;
}
- .hi-datepicker__text--showLunar {
- font-size: 12px;
- color: rgba(44, 48, 78, 0.2);
-
- &--festival {
- color: $basic-color;
- }
+ &-enter {
+ display: none;
+ opacity: 0;
+ transition: all 0.3s ease-in;
}
- .hi-datepicker__text——holiday {
+ &-enter-done {
display: block;
- width: 0;
- height: 0;
- font-size: 12px;
- position: absolute;
- top: 2px;
- right: 16px;
-
- &--rest {
- color: #1da653;
- }
-
- &--work {
- color: #f63;
- }
- }
-
- // .hi-datepicker__cell--large--laster {
- // .hi-datepicker__text——holiday {
- // top: -28px;
- // right: -26px;
- // }
- // }
-
- &.prev,
- &.next {
- .hi-datepicker__text {
- color: rgba(44, 48, 78, 0.2);
- }
- }
-
- // &.in-range:not(.next):not(.prev) {
- // .hi-datepicker__content {
- // background: rgba(66, 132, 245, 0.1);
- // }
- // }
-
- &.today:not(.in-range) {
- .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- margin: auto;
- border: 1px solid $basic-color;
- color: $basic-color;
- }
-
- .hi-datepicker__text--showLunar {
- color: $basic-color;
- }
- }
- }
-
- &.today:not(.in-range).hi-datepicker__cell--large {
- .hi-datepicker__content__wrap {
- margin: auto;
- border: 1px solid $basic-color;
- opacity: 0.8;
- box-sizing: border-box;
-
- .hi-datepicker__content {
- border: none;
- }
- }
- }
-
- &.current:not(.in-range) {
- &:not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- margin: auto;
- background-color: $basic-color;
- }
- }
-
- &.hi-datepicker__cell--large {
- .hi-datepicker__content__wrap {
- background-color: $basic-color;
- }
- }
-
- .hi-datepicker__text {
- color: #fff;
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
+ opacity: 1;
+ transition: all 0.3s ease-in;
}
- }
-
- &__text {
- display: inline-block;
- height: 24px;
- line-height: 24px;
- // box-sizing: border-box;
- // border-radius: 2px;
- }
-
- &__shortcuts {
- background: #fff;
- border-right: 1px solid #f2f2f2;
- width: 105px;
- padding: 12px 20px;
- box-sizing: border-box;
- p {
- cursor: pointer;
- line-height: 34px;
- margin: 0;
-
- &:hover {
- color: $basic-color;
- }
+ &-exit {
+ display: block;
+ opacity: 1;
}
- }
-
- .hide {
- display: none !important;
- }
-}
-
-.hi-timepicker {
- width: 180px;
- background: #fff;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
- z-index: 1060;
-
- .hi-timepicker__body {
- width: 180px;
- }
-
- &--timerange {
- width: 400px;
- display: flex;
- justify-content: space-between;
- }
-
- &__split {
- flex: 1;
- height: 248px;
- margin-top: 47px;
- align-self: flex-end;
- border: 1px solid #f2f2f2;
- border-bottom: none;
- }
- &__timeheader {
- display: flex;
- justify-content: space-around;
- height: 48px;
- text-align: center;
- align-items: center;
- font-size: 14px;
- font-weight: 600;
- color: rgba(51, 51, 51, 1);
- border-bottom: 1px solid rgba(242, 242, 242, 1);
- box-sizing: border-box;
- }
-
- &__mark {
- // flex: 1;
- }
-
- &__timebody {
- display: flex;
- height: 248px;
- // border-bottom: 1px solid #f2f2f2;
- position: relative;
- justify-content: space-around;
- box-sizing: border-box;
- overflow: hidden;
- padding: 0;
-
- &::-webkit-scrollbar {
+ &-exit-done {
display: none;
- }
- }
-
- &__page-turn {
- position: absolute;
- z-index: 2;
- width: 16px;
- height: 16px;
- line-height: 16px;
- text-align: center;
- font-size: 16px;
- left: 22px;
- top: 0;
- cursor: pointer;
-
- &:last-child {
- top: auto;
- bottom: 0;
- }
- }
-
- &__list-container {
- width: 60px;
- overflow: hidden;
- position: relative;
- padding: 12px 0;
- }
-
- &__list {
- // position: absolute;
- // z-index: 2;
- width: 80px;
- height: 224px;
- margin: 0;
- list-style-type: none;
- // overflow-x: hidden;
- overflow-y: auto;
- padding: 0;
- user-select: none;
-
- &:nth-child(2) {
- left: 60px;
- z-index: 3;
- }
-
- &:nth-child(3) {
- left: 120px;
- z-index: 4;
- }
- }
-
- &__item {
- text-align: center;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
- line-height: 32px;
- height: 32px;
- width: 60px;
- cursor: pointer;
- box-sizing: border-box;
- // border-right: 1px solid rgba(242, 242, 242, 1);
- background-color: #fff;
-
- &--empty {
- cursor: default;
- }
-
- &--current {
- font-weight: bold;
- }
-
- &--disabled {
- color: rgba(44, 48, 78, 0.2);
- cursor: not-allowed;
- }
-
- &:hover:not(.hi-timepicker__item--current):not(.hi-timepikcer__item--empty):not(.hi-timepicker__item--disabled) {
- background-color: #eff5fe;
- }
- }
-
- &__footer {
- padding: 2px 0;
- text-align: right;
-
- button {
- margin-right: 4px;
- }
- }
-
- &__current-line {
- height: 32px;
- box-sizing: border-box;
- border-top: 1px solid rgba(242, 242, 242, 1);
- border-bottom: 1px solid rgba(242, 242, 242, 1);
-
- // background: rgba(247, 247, 247, 1);
- position: absolute;
- top: 108px;
- left: 0;
- width: 156px;
- z-index: 4;
- pointer-events: none;
- display: flex;
- text-align: center;
- align-items: center;
- margin: 0 12px;
-
- span {
- flex: 1;
- }
- }
-}
-
-@each $key, $value in $palette-primary {
- .theme__#{$key} {
- &.hi-datepicker__input {
- &:hover:not(.hi-datepicker__input--disabled) {
- border: 1px solid map-get(get-palette($value), '50');
- }
-
- &--focus {
- border: 1px solid map-get(get-palette($value), '50');
- }
- }
-
- .hi-timepicker__item:hover:not(.hi-timepicker__item--current):not(.hi-timepikcer__item--empty):not(.hi-timepicker__item--disabled) {
- background-color: rgba($value, 0.1);
- }
- }
-
- .theme__#{$key}.hi-datepicker .hi-datepicker {
- &__time-header {
- &--active {
- color: map-get(get-palette($value), '50');
- }
- }
-
- &__time-footer {
- color: map-get(get-palette($value), '50');
- }
-
- &__calender-container--date .hi-datepicker__cell.in-range:not(.range-se):not(.prev):not(.next) .hi-datepicker__content__wrap {
- width: 100%;
- background: rgba($value, 0.1);
- }
-
- &__shortcuts p:hover {
- color: $value;
- }
-
- &__calender-container--week .hi-datepicker__row:not(.hi-datepicker__row--current-week):hover td .hi-datepicker__content__wrap {
- background: rgba($value, 0.1);
- }
-
- &__header-btns .hi-icon:hover {
- color: $value;
- }
-
- &__header-btns-disabled .hi-icon {
- color: #a8aaaf;
- cursor: not-allowed;
- }
-
- &__header-btns-disabled .hi-icon:hover {
- color: #a8aaaf;
- cursor: not-allowed;
- }
-
- &__period-item--active {
- color: $value;
- }
-
- &__period-item:hover {
- background: rgba($value, 0.1);
- }
-
- &__row {
- &--current-week {
- .hi-datepicker__content {
- background: rgba($value, 0.1);
- }
-
- .range-se {
- .hi-datepicker__content {
- background: map-get(get-palette($value), '50');
- color: #fff;
- border-radius: 2px;
- }
-
- .hi-datepicker__text {
- color: #fff;
- }
- }
-
- .hi-datepicker__cell--large.range-se {
- border-radius: 2px;
- background: map-get(get-palette($value), '50');
-
- .hi-datepicker__content {
- color: #fff;
- }
-
- .hi-datepicker__text {
- color: #fff;
- }
- }
-
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '50');
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
- }
- }
-
- .hi-datepicker__cell.in-range.hi-datepicker__cell--large:not(.range-se) {
- padding: 4px 0;
-
- .hi-datepicker__content__wrap {
- width: 100%;
- }
- }
- }
- }
-
- &__cell {
- &:not(.hi-datepicker__cell--large):not(.disabled) .hi-datepicker__content:hover {
- background-color: rgba($value, 0.1);
- }
-
- &.range-se:not(.prev):not(.next):not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap:hover {
- background-color: rgba($value, 0.1);
- }
-
- &.hi-datepicker__cell--large .hi-datepicker__content__wrap:hover {
- background-color: rgba($value, 0.1);
- }
-
- .hi-datepicker__text——holiday {
- &--rest {
- color: map-get(get-palette($value), '50');
- }
- }
-
- &.in-range:not(.next):not(.prev) {
- .hi-datepicker__content {
- background: rgba($value, 0.1);
- }
-
- .hi-datepicker__content:hover {
- background: rgba($value, 0.1);
- }
- }
-
- &.range-se:not(.next):not(.prev):not(.hi-datepicker__cell--large) {
- .hi-datepicker__content {
- background: map-get(get-palette($value), '50');
- }
- }
-
- &.today:not(.in-range) {
- .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- margin: auto;
- border: 1px solid map-get(get-palette($value), '50');
- color: map-get(get-palette($value), '50');
- }
-
- .hi-datepicker__text--showLunar {
- color: map-get(get-palette($value), '50');
- }
- }
- }
-
- &.today.range-se {
- .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- color: #fff;
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
- }
- }
-
- &.today:not(.in-range).hi-datepicker__cell--large {
- .hi-datepicker__content__wrap {
- margin: auto;
- border: 1px solid map-get(get-palette($value), '50');
- opacity: 0.8;
- box-sizing: border-box;
-
- .hi-datepicker__content {
- border: none;
- }
- }
- }
-
- &.current:not(.in-range) {
- &:not(.hi-datepicker__cell--large) .hi-datepicker__content__wrap {
- .hi-datepicker__content {
- margin: auto;
- background-color: map-get(get-palette($value), '50');
- }
- }
-
- &.hi-datepicker__cell--large {
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '50');
- }
- }
-
- .hi-datepicker__text {
- color: #fff;
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
- }
- }
-
- &__calender-container--year,
- &__calender-container--month {
- .hi-datepicker__cell {
- &.today:not(.in-range) {
- .hi-datepicker__content__wrap {
- color: map-get(get-palette($value), '50');
- background: #fff;
- margin: inherit;
-
- .hi-datepicker__content {
- box-sizing: border-box;
- border: 1px solid map-get(get-palette($value), '50');
- background-color: #fff;
- color: map-get(get-palette($value), '50');
- }
- }
-
- &.hi-datepicker__cell--large {
- .hi-datepicker__content__wrap {
- box-sizing: border-box;
- border: 1px solid map-get(get-palette($value), '50');
- color: map-get(get-palette($value), '50');
- background: #fff;
- margin: inherit;
-
- .hi-datepicker__text {
- display: inline-block;
- height: 22px;
- // box-sizing: border-box;
- // border-radius: 2px;
- }
-
- .hi-datepicker__content {
- border: none;
- background-color: #fff;
- color: map-get(get-palette($value), '50');
- }
- }
- }
- }
-
- &.today.in-range {
- .hi-datepicker__content__wrap {
- color: map-get(get-palette($value), '50');
- background: #fff;
- margin: inherit;
-
- .hi-datepicker__content {
- color: #333;
- }
- }
- }
-
- &.today.range-se {
- .hi-datepicker__content__wrap {
- color: map-get(get-palette($value), '50');
- background: #fff;
- margin: inherit;
-
- .hi-datepicker__content {
- box-sizing: border-box;
- color: map-get(get-palette($value), '50');
- }
- }
- }
-
- &.today.range-se.in-range {
- .hi-datepicker__content__wrap {
- color: map-get(get-palette($value), '50');
- background: #fff;
- margin: inherit;
-
- .hi-datepicker__content {
- box-sizing: border-box;
- color: #fff;
- }
- }
- }
- }
- }
-
- &__body {
- .hi-datepicker__time-footer {
- color: map-get(get-palette($value), '40');
- }
-
- &--large {
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40');
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
-
- .hi-datepicker__content {
- background: none;
- color: #fff;
- }
- }
-
- &.today {
- background: none;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40');
- opacity: 1;
- border: none;
- }
- }
- }
- }
-
- &--range {
- width: 578px;
- display: flex;
- border: none;
-
- &--large {
- width: 866px;
-
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40');
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
-
- .hi-datepicker__content {
- background: none;
- color: #fff;
- }
- }
-
- &.today {
- background: none;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40');
- opacity: 1;
- border: none;
- }
- }
- }
- }
-
- .hi-datepicker__panel {
- flex: 1;
- }
- }
-
- &--shortcuts {
- width: 683px;
-
- &--large {
- width: 970px;
-
- .hi-datepicker__panel {
- width: 432px;
- }
-
- .hi-datepicker__cell.range-se.hi-datepicker__cell--large {
- background-color: #fff;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40');
-
- .hi-datepicker__text——holiday {
- color: #fff;
-
- &--work {
- color: #fff;
- }
- }
-
- .hi-datepicker__text--showLunar {
- color: #fff;
- }
-
- .hi-datepicker__content {
- background: none;
- color: #fff;
- }
- }
-
- &.today {
- background: none;
-
- .hi-datepicker__content__wrap {
- background-color: map-get(get-palette($value), '40') !important;
- opacity: 1;
- border: none;
- }
- }
- }
- }
- }
+ opacity: 0;
+ transition: all 0.3s ease-in;
}
}
}
diff --git a/components/date-picker/style/timepicker.js b/components/date-picker/style/timepicker.js
new file mode 100644
index 000000000..36dc5c486
--- /dev/null
+++ b/components/date-picker/style/timepicker.js
@@ -0,0 +1 @@
+import './timepicker.scss'
diff --git a/components/date-picker/style/timepicker.scss b/components/date-picker/style/timepicker.scss
index 82d0321ac..e5af63da0 100644
--- a/components/date-picker/style/timepicker.scss
+++ b/components/date-picker/style/timepicker.scss
@@ -1,35 +1,149 @@
+@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
+
.hi-timepicker {
width: 180px;
- background: #fff;
+ background: use-color('white');
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
+ z-index: 1060;
+
+ &__popper {
+ width: 180px;
+ height: 296px;
+ background: use-color('white');
+ box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
+ border-radius: 4px;
+
+ &--range {
+ width: 400px;
+ }
+ }
+
+ &__panel {
+ background: use-color('white');
+
+ &--range {
+ width: 400px;
+ display: flex;
+ justify-content: space-between;
+ }
+ }
+
+ &__body {
+ width: 180px;
+ }
+
+ &__split {
+ flex: 1;
+ height: 248px;
+ margin-top: 47px;
+ align-self: flex-end;
+ border: 1px solid use-color('gray-10');
+ border-bottom: none;
+ }
+
+ &__timeheader {
+ display: flex;
+ justify-content: space-around;
+ height: 48px;
+ text-align: center;
+ align-items: center;
+ font-size: 14px;
+ font-weight: $font-weight-bold;
+ color: use-color('black');
+ border-bottom: 1px solid use-color('gray-10');
+ box-sizing: border-box;
+ }
&__timebody {
display: flex;
+ height: 248px;
+ position: relative;
justify-content: space-around;
- height: 195px;
- border-bottom: 1px solid #f2f2f2;
+ box-sizing: border-box;
+ overflow: hidden;
+ padding: 0;
+
+ &::-webkit-scrollbar {
+ display: none;
+ }
}
- &__time-list {
- overflow: auto;
- flex: 1;
+ &__page-turn {
+ position: absolute;
+ z-index: 2;
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ text-align: center;
+ font-size: 16px;
+ left: 22px;
+ top: 0;
+ cursor: pointer;
- &-el {
- text-align: center;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
- line-height: 22px;
- padding: 8px;
- border-right: 1px solid #f2f2f2;
- cursor: pointer;
+ &:last-child {
+ top: auto;
+ bottom: 0;
+ }
+ }
+
+ &__list-container {
+ width: 60px;
+ overflow: hidden;
+ position: relative;
+ padding: 12px 0;
+ }
+
+ &__list {
+ width: 80px;
+ height: 224px;
+ margin: 0;
+ list-style-type: none;
+ overflow-y: auto;
+ padding: 0;
+ user-select: none;
+
+ &:nth-child(2) {
+ left: 60px;
+ z-index: 3;
+ }
- &_current {
- background: #f7f7f7;
- font-weight: bold;
- }
+ &:nth-child(3) {
+ left: 120px;
+ z-index: 4;
}
}
- &__time-footer {
+ &__item {
+ text-align: center;
+ font-size: 14px;
+ color: use-color('gray-80');
+ line-height: 32px;
+ height: 32px;
+ width: 60px;
+ cursor: pointer;
+ box-sizing: border-box;
+ background-color: use-color('white');
+
+ &--empty {
+ cursor: default;
+ }
+
+ &--current {
+ font-weight: bold;
+ }
+
+ &--disabled {
+ color: rgba(44, 48, 78, 0.2);
+ cursor: not-allowed;
+ }
+
+ &:hover:not(.hi-timepicker__item--current):not(.hi-timepikcer__item--empty):not(.hi-timepicker__item--disabled) {
+ background-color: use-color('primary-10');
+ }
+ }
+
+ &__footer {
padding: 2px 0;
text-align: right;
@@ -37,4 +151,25 @@
margin-right: 4px;
}
}
+
+ &__current-line {
+ height: 32px;
+ box-sizing: border-box;
+ border-top: 1px solid use-color('gray-10');
+ border-bottom: 1px solid use-color('gray-10');
+ position: absolute;
+ top: 108px;
+ left: 0;
+ width: 156px;
+ z-index: 4;
+ pointer-events: none;
+ display: flex;
+ text-align: center;
+ align-items: center;
+ margin: 0 12px;
+
+ span {
+ flex: 1;
+ }
+ }
}
diff --git a/components/date-picker/util.js b/components/date-picker/util.js
deleted file mode 100644
index 3088eb3ed..000000000
--- a/components/date-picker/util.js
+++ /dev/null
@@ -1,103 +0,0 @@
-import request from 'axios'
-import { addMonths, getDay, subDays, differenceInDays, startOfWeek, endOfWeek, getYear, getMonth, toDate, isValid } from './dateUtil'
-const holiday = {
- PRCHoliday: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCHoliday.json?',
- PRCLunar: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCLunar.json?',
- IndiaHoliday: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/IndiaHoliday.json?'
-}
-
-export const deconstructDate = (date, weekOffset = 0) => {
- !(date instanceof Date) && (date = new Date(date))
- return {
- year: date.getFullYear(),
- month: date.getMonth() + 1,
- week: getYearWeek(date, weekOffset).weekNum,
- day: date.getDate(),
- hours: date.getHours(),
- minutes: date.getMinutes(),
- seconds: date.getSeconds(),
- time: date.getTime()
- }
-}
-export const getYearWeek = (date, weekStart = 0) => {
- const year = date.getFullYear()
- let date1 = new Date(year, parseInt(date.getMonth()), date.getDate())
- let date2 = new Date(year, 0, 1)
- let num = getDay(date2)
- date2 = subDays(date2, weekStart ? (num - 1) : num) // 周日开始
- const din = differenceInDays(date1, date2)
- return {
- weekNum: Math.ceil((din + 1) / 7),
- start: startOfWeek(date1, {weekStartsOn: weekStart}),
- end: endOfWeek(date1, {weekStartsOn: weekStart})
- }
-}
-
-export const nextMonth = function (date) {
- !(date instanceof Date) && (date = new Date(date))
- return addMonths(date, 1)
-}
-
-// 判读日期是不可点击
-export const colDisabled = (type, col, _year, props, y) => {
- const {max: maxDate, min: minDate} = props
- const maxYear = maxDate && getYear(maxDate)
- const minYear = minDate && getYear(minDate)
- if (type === 'year') {
- col.text = y
- if (minDate || maxDate) {
- col.disabled = (y > maxYear || y < minYear)
- }
- } else {
- col.text = props.localeDatas.datePicker.month[y - 1]
-
- if (minDate || maxDate) {
- col.disabled = (_year > maxYear || _year < minYear)
-
- if (_year === minYear) {
- col.disabled = y - 1 < getMonth(minDate)
- }
- if (_year === maxYear && !col.disabled) {
- col.disabled = y - 1 > getMonth(maxDate)
- }
- }
- }
- return col
-}
-/**
- * 是否展示历法次要信息
- * @param {Object} props
- */
-export const showLargeCalendar = (props) => {
- return (props.type !== 'yearrange' && props.type !== 'monthrange') && (props.altCalendar || props.altCalendarPreset || props.dateMarkRender || props.dateMarkPreset)
-}
-
-export const getPRCDate = (api) => {
- const url = holiday[api]
- let options = {
- url,
- method: 'GET'
- }
- return url ? request.create().request(options) : null
-}
-
-// 处理输入不在该范围内的处理
-export const getInRangeDate = (startDate, endDate, max, min) => {
- let _startDate = isValid(startDate) ? startDate : ''
- let _endDate = isValid(endDate) ? endDate : ''
- if (min && isValid(startDate)) {
- const minTimestamp = Date.parse(toDate(min))
- const startDateTimestamp = Date.parse(startDate)
- const endDateTimestamp = Date.parse(endDate)
- _startDate = startDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(startDate)
- _endDate = endDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(endDate)
- }
- if (max && isValid(startDate)) {
- const maxTimestamp = Date.parse(toDate(max))
- const startDateTimestamp = Date.parse(_startDate)
- const endDateTimestamp = Date.parse(_endDate)
- _startDate = startDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_startDate)
- _endDate = endDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_endDate)
- }
- return {startDate: _startDate, endDate: _endDate}
-}
diff --git a/components/date-picker/utils.js b/components/date-picker/utils.js
new file mode 100644
index 000000000..32becc485
--- /dev/null
+++ b/components/date-picker/utils.js
@@ -0,0 +1,219 @@
+import React from 'react'
+import _ from 'lodash'
+import moment from 'moment'
+import request from 'axios'
+import Lunar from './toLunar'
+const holiday = {
+ PRCHoliday: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCHoliday.json?',
+ PRCLunar: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/PRCLunar.json?',
+ IndiaHoliday: 'https://cdn.cnbj1.fds.api.mi-img.com/hiui/IndiaHoliday.json?'
+}
+export const deconstructDate = (date) => {
+ return {
+ year: date.year(),
+ month: date.month(),
+ date: date.date(),
+ hour: date.hour(),
+ minute: date.minute(),
+ second: date.second()
+ }
+}
+/**
+ * 获取 yearrange monthrange 类型
+ * @param {String} type
+ */
+export const getView = (type) => {
+ return type.includes('year') || type.includes('month') ? type.split('range')[0] : 'date'
+}
+
+/**
+ *
+ * @param {Array} currentDates 原始数组
+ * @param {Moment} newDate 新时间
+ * @param {Number} index 更新数组位置
+ */
+export const genNewDates = (currentDates, newDate, index = 0) => {
+ const newDates = _.cloneDeep(currentDates)
+ newDates[index] = newDate
+ return newDates
+}
+
+/**
+ * 生成 renderDates 用于 Calender(Range) 渲染时的基础时间
+ * @param {Array} dates 原始数据
+ * @param {String} type 选择器类型
+ */
+export const parseRenderDates = (dates, type) => {
+ let [leftDate, rightDate] = _.cloneDeep(dates)
+ const getRightDate = () => {
+ if (type === 'yearrange') {
+ if (!rightDate) {
+ return moment(leftDate).add(12, 'year')
+ }
+ const diff = rightDate.year() - leftDate.year()
+ if (diff <= 12) {
+ return moment(leftDate).add(12, 'year')
+ }
+ const rYear = rightDate.year()
+ const nRightDate = moment(rightDate).year(rYear + (12 - (diff % 12)), 'year')
+ return nRightDate
+ }
+ if (type === 'monthrange') {
+ return moment(leftDate).add(1, 'year')
+ }
+ if (!rightDate || leftDate.isSame(rightDate, 'month')) {
+ return moment(leftDate).add(1, 'months')
+ }
+ return rightDate
+ }
+
+ leftDate = leftDate || moment()
+ rightDate = getRightDate()
+ return [leftDate, rightDate]
+}
+
+export const getTimePeriodData = (timeInterval) => {
+ const segment = (24 * 60) / timeInterval
+ let pre = 0
+ let next = 0
+ const periodData = []
+ const func = (val) => (val < 10 ? '0' + val : val)
+ for (let i = 0; i < segment; i++) {
+ next += timeInterval
+ const timeStart = func(parseInt(pre / 60))
+ const timeEnd = func(parseInt(next / 60))
+ const timeStr = timeStart + ':' + func(pre % 60) + ' ~ ' + timeEnd + ':' + func(next % 60)
+ periodData.push({
+ timeStr,
+ timeStart,
+ timeEnd
+ })
+ pre = next
+ }
+ return periodData
+}
+
+/**
+ * 是否展示历法次要信息
+ * @param {Object} props
+ */
+export const showLargeCalendar = (props) => {
+ return props.altCalendar || props.altCalendarPreset || props.dateMarkRender || props.dateMarkPreset
+}
+
+export const getPRCDate = (api) => {
+ const url = holiday[api]
+ const options = {
+ url,
+ method: 'GET'
+ }
+ return url ? request.create().request(options) : null
+}
+
+const altCalendarText = (datainfo, lunarcellinfo, altCalendarPresetData) => {
+ if (altCalendarPresetData && altCalendarPresetData[datainfo]) {
+ return altCalendarPresetData[datainfo].text || altCalendarPresetData[datainfo]
+ }
+ return lunarcellinfo.text
+}
+const getMarkNode = (node) => {
+ return {node}
+}
+const markRender = (datainfo, dateMarkRender, dateMarkPresetData) => {
+ // 存在传入自定就优先使用自定义
+ const markRenderNode = dateMarkRender ? dateMarkRender(new Date(datainfo).getTime(), new Date().getTime()) : false
+ if (markRenderNode) {
+ return getMarkNode(markRenderNode)
+ }
+ if (dateMarkPresetData) {
+ return dateMarkPresetData[datainfo]
+ }
+ return null
+}
+/**
+ * 获取完整时间
+ * @param {*} value 日
+ * @param {*} cls className
+ */
+export const getFullTime = ({
+ cell,
+ renderDate,
+ altCalendarPreset,
+ altCalendar,
+ dateMarkRender,
+ altCalendarPresetData,
+ dateMarkPresetData
+}) => {
+ if (cell.type === 'disabled') return false
+ const newDate = moment(renderDate)
+ newDate.date(cell.value)
+ if (cell.type === 'prev') {
+ newDate.subtract(1, 'months')
+ }
+ if (cell.type === 'next') {
+ newDate.add(1, 'months')
+ }
+ const _year = newDate.year()
+ const _month = newDate.month() + 1
+ const _value = cell.value
+ const datainfo = _year + '/' + _month + '/' + _value
+ const LunarInfo = Lunar.toLunar(_year, _month, _value)
+ let lunarcellinfo = {
+ text: altCalendarPreset === 'zh-CN' ? LunarInfo[6] : null, // 默认预置信息
+ highlight: false
+ }
+ if (altCalendar || dateMarkRender) {
+ lunarcellinfo = {
+ text: altCalendarText(datainfo, lunarcellinfo, altCalendarPresetData),
+ highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
+ nodeMark: markRender(datainfo, dateMarkRender, dateMarkPresetData)
+ }
+ }
+ if (
+ (dateMarkPresetData && dateMarkPresetData[datainfo]) ||
+ (altCalendarPresetData && altCalendarPresetData[datainfo])
+ ) {
+ lunarcellinfo = {
+ text: altCalendarText(datainfo, lunarcellinfo, altCalendarPresetData),
+ highlight: altCalendarPresetData && altCalendarPresetData[datainfo] && altCalendarPresetData[datainfo].highlight,
+ nodeMark: markRender(datainfo, dateMarkRender, dateMarkPresetData)
+ }
+ }
+ return { ...altCalendarPresetData[datainfo], ...lunarcellinfo }
+}
+
+/**
+ * 处理输入不在该范围内的处理
+ * @param {String} startDate 开始日期
+ * @param {String} endDate 结束日期
+ * @param {String} max 最大日期
+ * @param {String} min 最小日期
+ */
+export const getInRangeDate = (momentstartDate, momentendDate, max, min) => {
+ const startDate = momentstartDate && momentstartDate.format()
+ const endDate = momentendDate && momentendDate.format()
+
+ const isValid = (value) => {
+ return moment(value).isValid()
+ }
+ const toDate = (value) => {
+ return moment(value).format()
+ }
+ let _startDate = isValid(startDate) ? startDate : ''
+ let _endDate = isValid(endDate) ? endDate : ''
+ if (min && isValid(startDate)) {
+ const minTimestamp = Date.parse(toDate(min))
+ const startDateTimestamp = Date.parse(startDate)
+ const endDateTimestamp = Date.parse(endDate)
+ _startDate = startDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(startDate)
+ _endDate = endDateTimestamp < minTimestamp ? new Date(minTimestamp) : new Date(endDate)
+ }
+ if (max && isValid(startDate)) {
+ const maxTimestamp = Date.parse(toDate(max))
+ const startDateTimestamp = Date.parse(_startDate)
+ const endDateTimestamp = Date.parse(_endDate)
+ _startDate = startDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_startDate)
+ _endDate = endDateTimestamp > maxTimestamp ? new Date(maxTimestamp) : new Date(_endDate)
+ }
+ return { startDate: _startDate, endDate: _endDate }
+}
diff --git a/components/drawer/index.d.ts b/components/drawer/index.d.ts
new file mode 100644
index 000000000..6417f7d67
--- /dev/null
+++ b/components/drawer/index.d.ts
@@ -0,0 +1,15 @@
+import { CSSProperties } from "react"
+
+interface Props {
+ title?: string | JSX.Element
+ visible?: boolean
+ closable?: boolean
+ maskClosable?: boolean
+ showMask?: boolean
+ width?: number
+ footer?: JSX.Element
+ placement?: 'left' | 'right'
+ onClose?: (e: MouseEvent) => void
+}
+declare const Drawer: React.ComponentType
+export default Drawer
diff --git a/components/drawer/index.jsx b/components/drawer/index.jsx
new file mode 100644
index 000000000..d310d16db
--- /dev/null
+++ b/components/drawer/index.jsx
@@ -0,0 +1,74 @@
+import React, { useRef, useEffect } from 'react'
+import ReactDOM from 'react-dom'
+import Icon from '../icon'
+import Classnames from 'classnames'
+import './style/index'
+
+const PREFIX = 'hi-drawer'
+
+const getDefaultContainer = () => {
+ const defaultContainer = document.createElement('div')
+ document.body.appendChild(defaultContainer)
+ return defaultContainer
+}
+
+const DrawerComp = ({
+ children,
+ container,
+ visible,
+ title,
+ onClose,
+ maskClosable = true,
+ closable = true,
+ footer,
+ width,
+ showMask = true,
+ placement = 'right'
+}) => {
+ // TODO: 整体可以抽成一个 hooks 供 modal 和 drawer 复用
+ const defaultContainer = useRef(false)
+ if (defaultContainer.current === false) {
+ defaultContainer.current = getDefaultContainer()
+ }
+
+ useEffect(() => {
+ const parent = (container || defaultContainer.current).parentNode
+ // 屏蔽滚动条
+ if (visible) {
+ parent.style.setProperty('overflow', 'hidden')
+ } else {
+ parent.style.removeProperty('overflow')
+ }
+ }, [visible, container])
+
+ return ReactDOM.createPortal(
+
- {
- shortcuts && this.renderShortcut(shortcuts)
- }
-
- {
- showTime && (
-
- {
- this.renderHeader(currentView, leftDate, 'left')
- }
-
-
-
-
- {
- this.renderHeader(currentView, rightDate, 'right')
- }
-
-
-
-
- {this.getRangeDateStr()}
-
- )
- }
- {
- showMask && (
- { this.setState({showMask: false}) }} />
- )
- }
- {
- showMask && (
- {
- this.setState({
- leftDate: d.startDate,
- rightDate: d.endDate
- })
- this.props.onPick(d, r)
- }}
- />
- )
- }
-
- )
- }
-}
-
-export default Provider(DatePanel)
diff --git a/components/date-picker/datepicker-legacy/Modal.js b/components/date-picker/datepicker-legacy/Modal.js
deleted file mode 100644
index 07aea567a..000000000
--- a/components/date-picker/datepicker-legacy/Modal.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import {Component} from 'react'
-import ReactDOM from 'react-dom'
-import clickOutSide from 'react-click-outside'
-class Modal extends Component {
- constructor (props) {
- super(props)
- this.el = document.createElement('div')
- this._body = document.body
- }
-
- componentDidMount () {
- this._body.appendChild(this.el)
- }
- handleClickOutside (e) {
- this.props.clickOutSide(e)
- }
- componentWillUnmount () {
- this._body.removeChild(this.el)
- }
- render () {
- return ReactDOM.createPortal(
- this.props.children,
- this.el
- )
- }
-}
-export default clickOutSide(Modal)
diff --git a/components/date-picker/datepicker-legacy/Time.js b/components/date-picker/datepicker-legacy/Time.js
deleted file mode 100644
index d74d35ec6..000000000
--- a/components/date-picker/datepicker-legacy/Time.js
+++ /dev/null
@@ -1,275 +0,0 @@
-import React, {Component} from 'react'
-import {deconstructDate} from './util'
-import Icon from '../../icon'
-import classNames from 'classnames'
-import { isSameDay } from './dateUtil'
-export default class TimePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- date: new Date(props.date),
- prefix: {
- hours: 0,
- minutes: 0,
- seconds: 0
- },
- hoursArrow: false,
- minutesArrow: false,
- secondsArrow: false
- }
- this.hoursList = null
- this.minutesList = null
- this.secondsList = null
- this.liPrefix = props.onlyTime ? [1, 2, 3] : [1, 2, 3, 4]
- this.liSuffix = props.onlyTime ? [1, 2, 3] : [1, 2, 3, 4]
- this.hoursScrollEvent = this.scrollEvent.bind(this, 'hours')
- this.minutesScrollEvent = this.scrollEvent.bind(this, 'minutes')
- this.secondsScrollEvent = this.scrollEvent.bind(this, 'seconds')
- this.pageUpRef = React.createRef()
- this.pageDownRef = React.createRef()
- }
- range (num) {
- let arr = []
- for (let i = 0; i < num; i++) {
- arr.push(i < 10 ? '0' + i : i.toString())
- }
- return arr
- }
- componentDidMount () {
- this.completeScrollTop()
- }
- addListener () {
- this.hoursList && this.hoursList.addEventListener('scroll', this.hoursScrollEvent)
- this.minutesList && this.minutesList.addEventListener('scroll', this.minutesScrollEvent)
- this.secondsList && this.secondsList.addEventListener('scroll', this.secondsScrollEvent)
- }
- scrollEvent (type, e) {
- const st = e.target.scrollTop
- const val = Math.round(st / 32)
- const {date} = this.state
- if (type === 'hours') {
- date.setHours(val)
- } else if (type === 'minutes') {
- date.setMinutes(val)
- } else {
- date.setSeconds(val)
- }
- this.setState({
- date
- })
- this.props.onPick(date, true)
- }
- componentWillUnmount () {
- this.hoursList.removeEventListener('scroll', this.hoursScrollEvent)
- this.minutesList.removeEventListener('scroll', this.minutesScrollEvent)
- this.secondsList.removeEventListener('scroll', this.secondsScrollEvent)
- }
- componentWillReceiveProps (props) {
- if (!isSameDay(props.date, this.state.date)) {
- this.setState({
- date: props.date
- })
- }
- }
- completeScrollTop () {
- const {date} = this.state
- let {hours, minutes, seconds} = deconstructDate(date)
- const dVal = 32
- setTimeout(() => {
- this.hoursList.scrollTop = (hours) * dVal
- this.minutesList.scrollTop = (minutes) * dVal
- this.secondsList.scrollTop = (seconds) * dVal
- }, 0)
- setTimeout(() => {
- this.addListener()
- }, 200)
- }
-
- clickEvent (flag, e) {
- const li = e.target
- if (!li.innerText) return
- const {date} = this.state
- if (li.nodeName !== 'LI') return false
- const c = parseInt(li.innerText)
- if (flag === 'hours') {
- date.setHours(c)
- } else if (flag === 'minutes') {
- date.setMinutes(c)
- } else {
- date.setSeconds(c)
- }
- this.setState({
- date
- }, () => {
- this.completeScrollTop()
- })
- this.props.onPick(date, true)
- }
- _renderPrefix (val) {
- return val === 1 ? : [, ]
- }
- _renderSuffix (val, limit) {
- if (limit - val === 1) {
- return [, ]
- } else if (limit - val === 2) {
- return
- }
- }
- scrollPageUp (type) {
- const {date} = this.state
- let cHours = date.getHours()
- let cMinutes = date.getMinutes()
- let cSeconds = date.getSeconds()
- if (type === 'hours') {
- cHours = cHours === 0 ? 0 : cHours - 1
- this.hoursList.scrollTop = cHours * 32
- }
- if (type === 'minutes') {
- cMinutes = cMinutes === 0 ? 0 : cMinutes - 1
- this.minutesList.scrollTop = cMinutes * 32
- }
- if (type === 'seconds') {
- cSeconds = cSeconds === 0 ? 0 : cSeconds - 1
- this.secondsList.scrollTop = cSeconds * 32
- }
- date.setHours(cHours, cMinutes, cSeconds)
- this.setState({date})
- }
- scrollPageDown (type) {
- const {date} = this.state
- let cHours = date.getHours()
- let cMinutes = date.getMinutes()
- let cSeconds = date.getSeconds()
- if (type === 'hours') {
- cHours = cHours === 23 ? 23 : cHours + 1
- this.hoursList.scrollTop = cHours * 32
- }
- if (type === 'minutes') {
- cMinutes = cMinutes === 59 ? 59 : cMinutes + 1
- this.minutesList.scrollTop = cMinutes * 32
- }
- if (type === 'seconds') {
- cSeconds = cSeconds === 59 ? 59 : cSeconds + 1
- this.secondsList.scrollTop = cSeconds * 32
- }
- date.setHours(cHours, cMinutes, cSeconds)
- this.setState({date}, () => {
- this.props.onPick(date, true)
- })
- }
- renderArrow (type) {
- return (
-
-
- )
- }
-}
diff --git a/components/date-picker/datepicker-legacy/TimePanel.js b/components/date-picker/datepicker-legacy/TimePanel.js
deleted file mode 100644
index ed212311e..000000000
--- a/components/date-picker/datepicker-legacy/TimePanel.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, {Component} from 'react'
-import Time from './Time'
-import Provider from '../../context'
-
-class TimePanel extends Component {
- constructor (props) {
- super(props)
- this.state = {
- style: props.style
- }
- if (this.props.type !== 'time') {
- this.state.style = {
- position: 'relative'
- }
- }
- }
- onTimePick (date, bol) {
- const {showTime} = this.props
- if (showTime) {
- this.props.onPick(date, true)
- } else {
- this.props.onPick(date, bol)
- }
- }
- render () {
- const { localeDatas, date, type } = this.props
- return (
-
- {lHours}
- {lMinutes}
- {lSeconds}
-
-
-
- this.setState({hoursArrow: true})}
- onMouseLeave={() => this.setState({hoursArrow: false})}
- >
-
- - { this.hoursList = el }}
- className='hi-timepicker__list'
- onClick={this.clickEvent.bind(this, 'hours')}
- >
- {this.liPrefix}
- {
- this.range(24).map((m, n) => {
- const _class = classNames(
- 'hi-timepicker__item',
- n === hours && 'hi-timepicker__item--current'
- )
- return (
-
this.setState({minutesArrow: true})}
- onMouseLeave={() => this.setState({minutesArrow: false})}
- >
-
- - { this.minutesList = el }}
- onClick={this.clickEvent.bind(this, 'minutes')}
- >
- {this.liPrefix}
- {
- this.range(60).map((m, n) => {
- return
this.setState({secondsArrow: true})}
- onMouseLeave={() => this.setState({secondsArrow: false})}
- >
-
- - { this.secondsList = el }}
- className='hi-timepicker__list'
- onClick={this.clickEvent.bind(this, 'seconds')}
- >
- {this.liPrefix}
- {
- this.range(60).map((m, n) => {
- return
- {/* {hours}
- {minutes}
- {seconds} */}
-
- {/*
-
-
-
- )
- }
-}
-
-export default Provider(TimePanel)
diff --git a/components/date-picker/datepicker-legacy/TimePeriodPanel.js b/components/date-picker/datepicker-legacy/TimePeriodPanel.js
deleted file mode 100644
index b506a8167..000000000
--- a/components/date-picker/datepicker-legacy/TimePeriodPanel.js
+++ /dev/null
@@ -1,66 +0,0 @@
-import React, {Component} from 'react'
-import classNames from 'classnames'
-import Provider from '../../context'
-import {getHours, getMinutes} from './dateUtil'
-class TimePeriodPanel extends Component {
- constructor (props) {
- super(props)
- this.listEl = React.createRef()
- }
- calcInterval () {
- const { timeInterval } = this.props
- const segment = 24 * 60 / timeInterval
- let pre = 0
- let next = 0
- let arr = []
- const func = (val) => (val < 10 ? '0' + val : val)
- for (let i = 0; i < segment; i++) {
- next += timeInterval
- const time = func(parseInt(pre / 60)) + ':' + func(pre % 60) + ' ~ ' + func(parseInt(next / 60)) + ':' + func(next % 60)
- arr.push(time)
- pre = next
- }
- return arr
- }
- getActiveIndex () {
- const { date, timeInterval } = this.props
- return timeInterval >= 60 ? getHours(date) * 60 / timeInterval : (getMinutes(date) + getHours(date) * 60) / timeInterval
- }
- componentDidMount () {
- setTimeout(() => {
- this.listEl.current.scrollTop = this.getActiveIndex() * 37
- }, 0)
- }
- render () {
- const list = this.calcInterval()
- const { onTimePeriodPick, localeDatas } = this.props
- const activeIndex = this.getActiveIndex()
- return
-
- }
-}
-
-export default Provider(TimePeriodPanel)
diff --git a/components/date-picker/datepicker-legacy/TimePicker.js b/components/date-picker/datepicker-legacy/TimePicker.js
deleted file mode 100644
index cc7dcd508..000000000
--- a/components/date-picker/datepicker-legacy/TimePicker.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import DatePickerType from './Type'
-import BasePicker from './BasePicker'
-import TimePanel from './TimePanel'
-import Provider from '../../context'
-import TimeRangePanel from './TimeRangePanel'
-class TimePicker extends BasePicker {
- initPanel (state, props) {
- return (
- props.type === 'time'
- ? {localeDatas.datePicker.timePeriod}
-
-
- -
- {
- list.map((item, index) => {
- const cls = classNames(
- 'hi-datepicker-legacy__period-item',
- activeIndex === index && 'hi-datepicker-legacy__period-item--active'
- )
- return
-
-
-
-
- )
- }
-}
-
-export default Provider(TimeRangePanel)
diff --git a/components/date-picker/datepicker-legacy/Type.js b/components/date-picker/datepicker-legacy/Type.js
deleted file mode 100644
index cb923071d..000000000
--- a/components/date-picker/datepicker-legacy/Type.js
+++ /dev/null
@@ -1,25 +0,0 @@
-export default {
- // 默认普通日期(年月日)选择器
- Date: 'date',
- // 日期时间
- DateTime: 'datetime',
- // 时间
- Time: 'time',
- // 周
- Week: 'week',
- // 月
- Month: 'month',
- // 年
- Year: 'year',
- // 日期范围选择
- DateRange: 'daterange',
- // 周范围选择
- WeekRange: 'weekrange',
- // 时间范围选择
- TimeRange: 'timerange',
- // 时间段选择
- TimePeriod: 'timeperiod',
- // 日期时间范围选择
- DateTimeRange: 'datetimerange'
-
-}
diff --git a/components/date-picker/datepicker-legacy/WeekRangePanel.js b/components/date-picker/datepicker-legacy/WeekRangePanel.js
deleted file mode 100644
index d041862f9..000000000
--- a/components/date-picker/datepicker-legacy/WeekRangePanel.js
+++ /dev/null
@@ -1,237 +0,0 @@
-import React, {Component} from 'react'
-import {deconstructDate, nextMonth} from './util'
-import Calender from './Calender'
-import Icon from '../../icon'
-import classNames from 'classnames'
-import {startOfWeek, endOfWeek, isSameMonth} from './dateUtil'
-export default class WeekRangePanel extends Component {
- constructor (props) {
- super(props)
- const {startDate, endDate} = props.date
- let leftDate = new Date(startDate)
- let rightDate = endDate || nextMonth(leftDate)
- if (endDate) {
- if (isSameMonth(startDate, endDate)) {
- rightDate = nextMonth(leftDate)
- }
- }
- this.state = {
- date: leftDate,
- range: {
- startDate: startOfWeek(startDate),
- endDate: endDate ? endOfWeek(endDate) : endOfWeek(startDate),
- selecting: false
- },
- leftDate,
- rightDate
- }
- }
- /**
- * Header 中间部分内容
- * @param {String} type 选择器类型
- * @param {Number} year 当前年份
- * @param {Number} month 当前月份
- */
- getHeaderCenterContent (year, month) {
- const { localeDatas, locale } = this.props
- const {currentView} = this.state
- if (currentView === 'year') {
- return (year - 4) + '~' + (year + 7)
- }
- let arr = [localeDatas.datePicker.monthShort[month - 1]]
- if (locale === 'zh-CN') {
- arr.unshift(year + '年 ')
- } else {
- arr.push(` ${year}`)
- }
- return arr
- }
- /**
- * 渲染 Header 部分（包含箭头快捷操作）
- * @param {Object} args {
- * year: 当前年份
- * month: 当前月份
- * type: 选择器类型
- * num: 点击箭头时要步进的值 默认1 主要应用于年份选择时
- * }
- */
- renderHeader (type, value, lr) {
- const {year, month} = deconstructDate(value)
- return (
-
-
- )
- }
- /**
- * 改变月份事件
- * @param {Number} num 加减值
- */
- changeMonth (flag, pos) {
- let {leftDate, rightDate} = this.state
- let nLeftDate = new Date(leftDate.getTime())
- let nRightDate = new Date(rightDate.getTime())
- let left = deconstructDate(nLeftDate)
- let right = deconstructDate(nRightDate)
- if (pos === 'left') {
- if (flag) {
- left.month -= 1
- if (left.month < 0) {
- left.month = 12
- left.year -= 1
- }
- } else {
- left.month += 1
- if (left.month > 12) {
- left.month = 1
- left.year += 1
- }
- }
- nLeftDate.setFullYear(left.year)
- nLeftDate.setMonth(left.month - 1)
- } else {
- if (flag) {
- right.month -= 1
- if (right.month < 0) {
- right.month = 12
- right.year -= 1
- }
- } else {
- right.month += 1
- if (right.month > 12) {
- right.month = 1
- right.year += 1
- }
- }
- if (left.month === right.month - 1) {
- this.setState({
- disableArrow: {
- month: false
- }
- })
- }
- nRightDate.setFullYear(right.year)
- nRightDate.setMonth(right.month - 1)
- }
- if (nLeftDate <= nRightDate) {
- this.setState({
- leftDate: nLeftDate,
- rightDate: nRightDate
- })
- }
- }
- /**
- * 改变年份事件
- * @param {Number} num 加减值
- */
- changeYear (flag, pos) {
- let {leftDate, rightDate} = this.state
- let nLeftDate = new Date(leftDate.getTime())
- let nRightDate = new Date(rightDate.getTime())
- let left = deconstructDate(nLeftDate)
- let right = deconstructDate(nRightDate)
- if (pos === 'left') {
- if (flag) {
- left.year -= 1
- } else {
- left.year += 1
- }
- nLeftDate.setFullYear(left.year)
- // this.setState({
- // leftDate
- // })
- } else {
- if (flag) {
- right.year -= 1
- } else {
- right.year += 1
- }
- nRightDate.setFullYear(right.year)
- // this.setState({
- // rightDate
- // })
- }
- if (nLeftDate <= nRightDate) {
- this.setState({
- leftDate: nLeftDate,
- rightDate: nRightDate
- })
- }
- }
- pick (startDate, endDate) {
- const {range} = this.state
- const {onPick} = this.props
- range.startDate = startDate
- range.endDate = endDate
- this.setState({
- range
- })
- if (endDate) {
- onPick(range)
- }
- }
- onMouseMoveHandler (date) {
- const {range} = this.state
- range.endDate = date
- this.setState({
- range
- })
- }
- render () {
- const {range, leftDate, rightDate} = this.state
- const {type, theme} = this.props
- const _c = classNames(
- 'hi-datepicker-legacy',
- theme && 'theme__' + theme
- )
- // const {year, month, day} = deconstructDate(date)
- // const _date = new Date(year, month, day)
-
- return (
-
- this.changeYear(true, lr)} >
-
- {this.getHeaderCenterContent(year, month)}
-
- {/*
- {month}月
- */}
-
- this.changeMonth(false, lr)} >
-
-
- )
- }
-}
diff --git a/components/date-picker/datepicker-legacy/constants.js b/components/date-picker/datepicker-legacy/constants.js
deleted file mode 100644
index b1cadcbe1..000000000
--- a/components/date-picker/datepicker-legacy/constants.js
+++ /dev/null
@@ -1,52 +0,0 @@
-import {getYearWeek} from './util'
-import dateFormat from 'date-fns/format'
-export const TIME_BLOCK = {
- lineHeight: 22,
- padding: 8
-}
-export const DAY_MILLISECONDS = 86400000
-export const RANGE_SPLIT = '~'
-export const FORMATS = {
- date: 'yyyy-MM-dd',
- month: 'yyyy-MM',
- year: 'yyyy',
- time: 'HH:mm:ss',
- daterange: 'yyyy-MM-dd',
- week: 'yyyy',
- weekrange: 'yyyy',
- timeperiod: 'yyyy-MM-dd HH:mm:ss'
-}
-
-export const isVaildDate = (date) => {
- return date && (date instanceof Date || date.startDate || typeof date === 'number')
-}
-export const formatterDate = (type, date, formatter, showTime, localeDatas, weekOffset = 0) => {
- if (!isVaildDate(date)) {
- return ''
- }
- date = new Date(date)
- let str = ''
- switch (type) {
- // case 'daterange':
- // if (date instanceof Date) { date = {startDate: date, endDate: date} }
- // str = dateFormat(date.startDate, `${formatter}${showTime ? ' hh:mm:ss' : ''}`) + RANGE_SPLIT + dateFormat(date.endDate, `${formatter}${showTime ? ' hh:mm:ss' : ''}`)
- // break
- case 'weekrange':
- // if (date instanceof Date) { date = {startDate: date, endDate: date} }
- str = localeDatas.datePicker.weekrange(date.getFullYear(), getYearWeek(date, weekOffset).weekNum)
- break
- case 'year':
- case 'month':
- case 'time':
- str = dateFormat(date, formatter)
- break
- case 'week':
- str = localeDatas.datePicker.weekrange(date.getFullYear(), getYearWeek(date, weekOffset).weekNum)
- break
- default:
- str = dateFormat(date, `${formatter}${showTime ? ' HH:mm:ss' : ''}`)
- break
- }
-
- return str
-}
diff --git a/components/date-picker/datepicker-legacy/dateUtil.js b/components/date-picker/datepicker-legacy/dateUtil.js
deleted file mode 100644
index 115f552c0..000000000
--- a/components/date-picker/datepicker-legacy/dateUtil.js
+++ /dev/null
@@ -1,77 +0,0 @@
-import getDaysInMonth from 'date-fns/getDaysInMonth'
-import subMonths from 'date-fns/subMonths'
-import getDay from 'date-fns/getDay'
-import startOfMonth from 'date-fns/startOfMonth'
-import isWithinInterval from 'date-fns/isWithinInterval'
-import isSameDay from 'date-fns/isSameDay'
-import compareAsc from 'date-fns/compareAsc'
-import startOfDay from 'date-fns/startOfDay'
-import endOfDay from 'date-fns/endOfDay'
-import parse from 'date-fns/parse'
-import toDate from 'date-fns/toDate'
-import startOfWeek from 'date-fns/startOfWeek'
-import endOfWeek from 'date-fns/endOfWeek'
-import dateFormat from 'date-fns/format'
-import addMonths from 'date-fns/addMonths'
-import isSameMonth from 'date-fns/isSameMonth'
-import getYear from 'date-fns/getYear'
-import getMonth from 'date-fns/getMonth'
-import isToday from 'date-fns/isToday'
-import getHours from 'date-fns/getHours'
-import getMinutes from 'date-fns/getMinutes'
-import getSeconds from 'date-fns/getSeconds'
-import addHours from 'date-fns/addHours'
-import subDays from 'date-fns/subDays'
-import differenceInDays from 'date-fns/differenceInDays'
-import dfIsValid from 'date-fns/isValid'
-import addYears from 'date-fns/addYears'
-import subYears from 'date-fns/subYears'
-import parseISO from 'date-fns/parseISO'
-
-const isValid = (date) => {
- return (date && dfIsValid(toDate(date)))
-}
-const getValidDate = (date) => {
- return isValid(date) ? toDate(date) : new Date()
-}
-const getStartDate = (dateObj) => {
- return getValidDate(dateObj.startDate)
-}
-const getEndDate = (dateObj) => {
- return getValidDate(dateObj.endDate)
-}
-
-export {
- getDaysInMonth, // 获取当月的天数
- subMonths, // 月份减法
- addMonths, // 月份加法
- addYears, // 年份加
- subYears, // 年份减
- getDay, // 获取周几
- startOfMonth, // 指定日期月份的1日
- isWithinInterval, // 是否在指定日期范围内
- isSameDay, // 是否是同一天（忽略时分秒）
- compareAsc, // 比较两个日期
- startOfDay, // 一天的开始
- endOfDay, // 一天的结束
- parse, // 解析成日期
- startOfWeek, // 一周的开始
- endOfWeek, // 一周的结束
- dateFormat, // 格式化时间
- isSameMonth, // 是否是同一个月
- getYear, // 获取年
- getMonth, // 获取月
- isToday, // 是否是今天
- getHours, // 获取小时
- getMinutes, // 获取分钟
- getSeconds, // 获取秒
- addHours, // 小时加
- subDays, // 天减
- differenceInDays, // 相差多少天
- isValid, // 是否有效时间
- getStartDate, // 封装 - 获取开始时间
- getEndDate, // 封装 - 获取结果时间
- getValidDate, // 获取有效的时间
- toDate,
- parseISO
-}
diff --git a/components/date-picker/datepicker-legacy/index.js b/components/date-picker/datepicker-legacy/index.js
deleted file mode 100644
index 7eb52a122..000000000
--- a/components/date-picker/datepicker-legacy/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import DatePicker from './DatePicker'
-import './style/index'
-export default DatePicker
diff --git a/components/date-picker/datepicker-legacy/local.js b/components/date-picker/datepicker-legacy/local.js
deleted file mode 100644
index 5377c6b8f..000000000
--- a/components/date-picker/datepicker-legacy/local.js
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
- month: [ '一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二' ],
- week: [ '日', '一', '二', '三', '四', '五', '六' ]
-}
diff --git a/components/date-picker/datepicker-legacy/style/index.js b/components/date-picker/datepicker-legacy/style/index.js
deleted file mode 100644
index 34ed1fc38..000000000
--- a/components/date-picker/datepicker-legacy/style/index.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import './index.scss'
-// import './timepicker.scss'
diff --git a/components/date-picker/datepicker-legacy/style/index.scss b/components/date-picker/datepicker-legacy/style/index.scss
deleted file mode 100644
index 004479440..000000000
--- a/components/date-picker/datepicker-legacy/style/index.scss
+++ /dev/null
@@ -1,612 +0,0 @@
-@import '@hi-ui/core-css/index.scss';
-
-$basic-color: #4284f5 !default;
-
-.hi-datepicker-legacy {
- position: relative;
- // display: flex;
- background: #fff;
- z-index: 1060;
- font-size: 14px;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
-
- &__input-root {
- display: inline-block;
- }
-
- &__input {
- background: #fff;
- border: 1px solid #d8d8d8;
- border-radius: 2px;
- height: 32px;
- width: 180px;
- display: flex;
- align-items: center;
- justify-content: space-around;
- box-sizing: border-box;
-
- &:hover {
- border: 1px solid #4284f5;
- }
-
- &--range {
- width: 320px;
-
- input {
- flex: 0 1 40%;
- text-align: center;
- }
- }
-
- input {
- outline: none;
- border: 0;
- min-width: 0;
- min-height: 0;
- height: 28px;
- padding-left: 10px;
- flex: 1;
-
- &::-webkit-input-placeholder {
- color: #ccc;
- }
- }
-
- &--disabled {
- .hi-datepicker-legacy__input-icon,
- input {
- cursor: not-allowed;
- background: #f4f4f4;
- color: rgba(44, 48, 78, 0.2);
- }
- }
-
- &--middle {
- width: 240px;
- }
- }
-
- &__input-icon {
- height: 100%;
- flex: 0 0 32px;
- line-height: 32px;
- text-align: center;
- box-sizing: border-box;
- cursor: pointer;
- }
-
- &__header {
- border-bottom: 1px solid #f2f2f2;
- display: flex;
- justify-content: space-between;
- height: 47px;
- align-items: center;
- padding: 0 15px;
-
- &-btns {
- width: 50px;
- display: flex;
- justify-content: space-around;
-
- .hi-icon {
- cursor: pointer;
- flex: 1;
- }
- }
-
- &-text {
- font-weight: bold;
- cursor: pointer;
- }
- }
-
- &__body {
- background: #fff;
- border: 1px solid #d1dbe5;
- border-radius: 2px;
- box-sizing: border-box;
- width: 288px;
-
- &--hastime {
- width: 468px;
- display: flex;
-
- .hi-timepicker {
- box-shadow: none;
- border-left: 1px solid #f2f2f2;
- }
- }
-
- &--period {
- display: flex;
- width: 432px;
- }
-
- &--range {
- width: 578px;
- display: flex;
- border: none;
-
- .hi-datepicker-legacy__panel {
- flex: 1;
- }
- }
-
- &--shortcuts {
- width: 683px;
- }
- }
-
- &__time-period {
- width: 144px;
- border-left: 1px solid #f2f2f2;
- text-align: center;
- }
-
- &__period-header {
- line-height: 48px;
- height: 48px;
- font-weight: 600;
- border-bottom: 1px solid #f2f2f2;
- box-sizing: border-box;
- }
-
- &__period-list {
- list-style: none;
- margin: 0;
- padding: 0;
- margin-top: 8px;
- overflow: auto;
- height: 241px;
- }
-
- &__period-item {
- padding: 8px;
- cursor: pointer;
-
- &:hover {
- background: rgba(240, 246, 255, 1);
- }
-
- &--active {
- color: #4284f5;
- }
- }
-
- &__footer {
- height: 48px;
- border-top: 1px solid #f2f2f2;
- box-sizing: border-box;
- line-height: 48px;
- text-align: center;
- cursor: pointer;
- position: relative;
-
- &:hover {
- color: #4284f5;
- }
- }
-
- &__mask {
- width: 100%;
- height: 100%;
- background: rgba(0, 0, 0, 0.4);
- position: absolute;
- top: 0;
- left: 0;
- }
-
- &__time-text {
- position: absolute;
- width: 148px;
- height: 32px;
- border-radius: 2px;
- left: 50%;
- top: 8px;
- transform: translateX(-50%);
- background: #fff;
- z-index: 2;
- line-height: 32px;
- }
-
- &__calender-container {
- padding: 17px 18px 15px;
-
- &--year,
- &--month {
- padding: 10px 5px;
-
- .hi-datepicker-legacy__row {
- height: 57px;
- }
-
- .hi-datepicker-legacy__cell {
- width: 92px;
-
- &.today {
- .hi-datepicker-legacy__text {
- background: $basic-color;
- opacity: 1;
- color: #fff;
- }
- }
- }
-
- .hi-datepicker-legacy__text {
- width: 48px;
- }
- }
-
- &--week {
- .hi-datepicker-legacy__row {
- &:hover {
- .hi-datepicker-legacy__content {
- background: rgba(66, 132, 245, 0.1);
- }
- }
- }
- }
- }
-
- &__calender {
- border: 0;
- width: 100%;
- border-collapse: separate;
- border-spacing: 0;
-
- th {
- line-height: 24px;
- padding: 0;
- }
- }
-
- &__row {
- &::after {
- content: '';
- }
-
- &--current-week {
- .range-se {
- .hi-datepicker-legacy__content {
- background: $basic-color;
- }
- }
- }
- }
-
- // &__content {
- // margin: 0 3px;
- // background: #fff;
- // color: #fff;
- // border-radius: 2px;
- // }
-
- &__cell {
- cursor: pointer;
- text-align: center;
- line-height: 24px;
- padding: 4px 0;
- width: 36px;
- height: 24px;
-
- &.disabled {
- .hi-datepicker-legacy__content {
- cursor: not-allowed;
- color: map-get(get-palette($basic-color), 'g80');
- background: rgba(246, 246, 246, 1);
- }
- }
-
- &.range-se:not(.prev):not(.next) {
- .hi-datepicker-legacy__content {
- margin: 0 3px;
- background: $basic-color;
- color: #fff;
- border-radius: 2px;
- }
- }
-
- &.prev,
- &.next {
- .hi-datepicker-legacy__text {
- color: rgba(44, 48, 78, 0.2);
- }
- }
-
- // &.in-range:not(.next):not(.prev) {
- // .hi-datepicker-legacy__content {
- // background: rgba(66, 132, 245, 0.1);
- // }
- // }
-
- &.today:not(.in-range) {
- .hi-datepicker-legacy__text {
- border: 1px solid $basic-color;
- opacity: 0.8;
- }
- }
-
- &.current:not(.in-range) {
- .hi-datepicker-legacy__text {
- background: $basic-color;
- color: #fff;
- }
- }
- }
-
- &__text {
- display: inline-block;
- width: 24px;
- height: 24px;
- box-sizing: border-box;
- border-radius: 2px;
- }
-
- &__shortcuts {
- background: #fff;
- border-right: 1px solid #f2f2f2;
- width: 105px;
- text-align: center;
-
- p {
- cursor: pointer;
- }
- }
-
- .hide {
- display: none !important;
- }
-}
-
-.hi-timepicker-legacy {
- width: 180px;
- background: #fff;
- box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.12);
- z-index: 1;
-
- .hi-timepicker__body {
- width: 180px;
- }
-
- &--timerange {
- width: 400px;
- display: flex;
- justify-content: space-between;
- }
-
- &__split {
- flex: 1;
- height: 248px;
- margin-top: 47px;
- align-self: flex-end;
- border: 1px solid #f2f2f2;
- border-bottom: none;
- }
-
- &__timeheader {
- display: flex;
- height: 48px;
- text-align: center;
- align-items: center;
- font-size: 14px;
- font-weight: 600;
- color: rgba(51, 51, 51, 1);
- border-bottom: 1px solid rgba(242, 242, 242, 1);
- box-sizing: border-box;
- }
-
- &__mark {
- flex: 1;
- }
-
- &__timebody {
- display: flex;
- height: 248px;
- // border-bottom: 1px solid #f2f2f2;
- position: relative;
- box-sizing: border-box;
- overflow: hidden;
- padding: 0;
-
- &::-webkit-scrollbar {
- display: none;
- }
- }
-
- &__page-turn {
- position: absolute;
- z-index: 2;
- width: 16px;
- height: 16px;
- line-height: 16px;
- text-align: center;
- font-size: 16px;
- left: 22px;
- top: 0;
- cursor: pointer;
-
- &:last-child {
- top: auto;
- bottom: 0;
- }
- }
-
- &__list-container {
- width: 60px;
- overflow: hidden;
- position: relative;
- padding: 12px 0;
- }
-
- &__list {
- // position: absolute;
- // z-index: 2;
- width: 80px;
- height: 224px;
- margin: 0;
- list-style-type: none;
- // overflow-x: hidden;
- overflow-y: auto;
- padding: 0;
-
- &:nth-child(2) {
- left: 60px;
- z-index: 3;
- }
-
- &:nth-child(3) {
- left: 120px;
- z-index: 4;
- }
- }
-
- &__item {
- text-align: center;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
- line-height: 32px;
- height: 32px;
- width: 60px;
- cursor: pointer;
- box-sizing: border-box;
- // border-right: 1px solid rgba(242, 242, 242, 1);
- background-color: #fff;
-
- &--empty {
- cursor: default;
- }
-
- &--current {
- font-weight: bold;
- }
-
- &--disabled {
- color: rgba(44, 48, 78, 0.2);
- cursor: not-allowed;
- }
-
- &:hover:not(.hi-timepicker__item--current):not(.hi-timepikcer__item--empty):not(.hi-timepicker__item--disabled) {
- background-color: #eff5fe;
- }
- }
-
- &__footer {
- padding: 2px 0;
- text-align: right;
-
- button {
- margin-right: 4px;
- }
- }
-
- &__current-line {
- height: 32px;
- box-sizing: border-box;
- border-top: 1px solid rgba(242, 242, 242, 1);
- border-bottom: 1px solid rgba(242, 242, 242, 1);
-
- // background: rgba(247, 247, 247, 1);
- position: absolute;
- top: 108px;
- width: 156px;
- z-index: 4;
- pointer-events: none;
- display: flex;
- text-align: center;
- align-items: center;
- margin: 0 12px;
-
- span {
- flex: 1;
- }
- }
-}
-
-@each $key, $value in $palette-primary {
- .theme__#{$key} {
- .hi-datepicker-legacy {
- &__time-header {
- &--active {
- color: map-get(get-palette($value), '50');
- }
- }
-
- &__time-footer {
- color: map-get(get-palette($value), '50');
- }
-
- &__calender-container--year,
- &__calender-container--month {
- .hi-datepicker-legacy__cell {
- &.today {
- .hi-datepicker-legacy__text {
- border: 1px solid map-get(get-palette($value), '50') !important;
- color: map-get(get-palette($value), '50') !important;
- background: #fff !important;
- }
- }
- }
- }
-
- &__row {
- &--current-week {
- .hi-datepicker-legacy__content {
- // TODO: 色板值
- // background: map-get(get-palette($value), '10');
- background: rgba(66, 132, 245, 0.1);
- }
-
- .range-se {
- .hi-datepicker-legacy__content {
- background: map-get(get-palette($value), '50');
- color: #fff;
- margin: 0 3px;
- border-radius: 2px;
- }
-
- .hi-datepicker-legacy__text {
- color: #fff;
- }
- }
- }
- }
-
- &__cell {
- &.today:not(.in-range) {
- .hi-datepicker-legacy__text {
- border: 1px solid map-get(get-palette($value), '50');
- color: map-get(get-palette($value), '50');
- }
- }
-
- &.in-range:not(.next):not(.prev) {
- .hi-datepicker-legacy__content {
- // TODO: 色板值
- // background: map-get(get-palette($value), '10');
- background: rgba(66, 142, 245, 0.1);
- }
- }
-
- &.range-se:not(.next):not(.prev) {
- .hi-datepicker-legacy__content {
- background: map-get(get-palette($value), '50');
- }
- }
-
- &:hover:not(.today):not(.current):not(.in-range):not(.range-se):not(.disabled) {
- .hi-datepicker-legacy__text {
- // TODO: 色板值
- background: rgba(66, 142, 245, 0.1);
- // background: map-get(get-palette($value), '10');
- }
- }
- }
-
- &__body {
- .hi-datepicker-legacy__time-footer {
- color: map-get(get-palette($value), '40');
- }
- }
- }
- }
-}
diff --git a/components/date-picker/datepicker-legacy/style/timepicker.scss b/components/date-picker/datepicker-legacy/style/timepicker.scss
deleted file mode 100644
index 82d0321ac..000000000
--- a/components/date-picker/datepicker-legacy/style/timepicker.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.hi-timepicker {
- width: 180px;
- background: #fff;
-
- &__timebody {
- display: flex;
- justify-content: space-around;
- height: 195px;
- border-bottom: 1px solid #f2f2f2;
- }
-
- &__time-list {
- overflow: auto;
- flex: 1;
-
- &-el {
- text-align: center;
- font-size: 14px;
- color: rgba(0, 0, 0, 0.65);
- line-height: 22px;
- padding: 8px;
- border-right: 1px solid #f2f2f2;
- cursor: pointer;
-
- &_current {
- background: #f7f7f7;
- font-weight: bold;
- }
- }
- }
-
- &__time-footer {
- padding: 2px 0;
- text-align: right;
-
- button {
- margin-right: 4px;
- }
- }
-}
diff --git a/components/date-picker/datepicker-legacy/util.js b/components/date-picker/datepicker-legacy/util.js
deleted file mode 100644
index 1cde52bd6..000000000
--- a/components/date-picker/datepicker-legacy/util.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { addMonths, getDay, subDays, differenceInDays, startOfWeek, endOfWeek } from './dateUtil'
-
-export const deconstructDate = (date, weekOffset = 0) => {
- !(date instanceof Date) && (date = new Date(date))
- return {
- year: date.getFullYear(),
- month: date.getMonth() + 1,
- week: getYearWeek(date, weekOffset).weekNum,
- day: date.getDate(),
- hours: date.getHours(),
- minutes: date.getMinutes(),
- seconds: date.getSeconds(),
- time: date.getTime()
- }
-}
-export const getYearWeek = (date, weekStart = 0) => {
- const year = date.getFullYear()
- let date1 = new Date(year, parseInt(date.getMonth()), date.getDate())
- let date2 = new Date(year, 0, 1)
- let num = getDay(date2)
- date2 = subDays(date2, weekStart ? (num - 1) : num) // 周日开始
- const din = differenceInDays(date1, date2)
- return {
- weekNum: Math.ceil((din + 1) / 7),
- start: startOfWeek(date1, {weekStartsOn: weekStart}),
- end: endOfWeek(date1, {weekStartsOn: weekStart})
- }
-}
-
-export const calcDayCount = (year, month) => {
- return new Date(year, parseInt(month, 10), 0).getDate()
-}
-
-export const nextMonth = function (date) {
- !(date instanceof Date) && (date = new Date(date))
-
- return addMonths(date, 1)
-}
diff --git a/components/date-picker/hooks/index.js b/components/date-picker/hooks/index.js
new file mode 100644
index 000000000..b7866b287
--- /dev/null
+++ b/components/date-picker/hooks/index.js
@@ -0,0 +1,6 @@
+import useDate from './useDate'
+import usePlaceholder from './usePlaceholder'
+import useCalenderData from './useCalenderData'
+import useFormat from './useFormat'
+import useAltData from './useAltData'
+export { useDate, usePlaceholder, useCalenderData, useFormat, useAltData }
diff --git a/components/date-picker/hooks/useAltData.js b/components/date-picker/hooks/useAltData.js
new file mode 100644
index 000000000..2a8f55da8
--- /dev/null
+++ b/components/date-picker/hooks/useAltData.js
@@ -0,0 +1,90 @@
+import React, { useState, useEffect } from 'react'
+import { getPRCDate, deconstructDate } from '../utils'
+
+const useAltData = ({
+ altCalendarPreset,
+ altCalendar,
+ dateMarkPreset,
+ dateMarkRender
+}) => {
+ const [altCalendarPresetData, setAltCalendarPresetData] = useState({})
+ const [dateMarkPresetData, setDateMarkPresetData] = useState({})
+
+ // 获取预置数据
+ const getLunarPresetData = () => {
+ const allPRCDate = {}
+ if (['zh-CN', 'id-ID'].includes(altCalendarPreset)) {
+ const _urlKey =
+ altCalendarPreset === 'zh-CN' ? 'PRCLunar' : 'IndiaHoliday'
+ getPRCDate(_urlKey).then(res => {
+ Object.keys(res.data).forEach(key => {
+ let oneYear = {}
+ res.data[key][_urlKey].forEach(item => {
+ Object.assign(oneYear, {
+ [item.date.replace(/-/g, '/')]: {
+ ...item,
+ highlight: altCalendarPreset === 'id-ID'
+ }
+ })
+ })
+ Object.assign(allPRCDate, oneYear)
+ })
+ setAltCalendarPresetData(
+ altCalendar ? getAltCalendarData(allPRCDate) : allPRCDate
+ )
+ })
+ } else {
+ setAltCalendarPresetData(
+ altCalendar ? getAltCalendarData(allPRCDate) : {}
+ )
+ }
+ }
+ // 获取预置数据
+ const getMarkPresetData = () => {
+ if (altCalendarPreset && altCalendarPreset !== 'zh-CN') {
+ return
+ }
+ if (dateMarkPreset === 'zh-CN') {
+ getPRCDate('PRCHoliday').then(res => {
+ const allPRCDate = {}
+ Object.keys(res.data).forEach(key => {
+ Object.keys(res.data[key].PRCHoliday).forEach(elkey => {
+ allPRCDate[elkey.replace(/-/g, '/')] =
+ res.data[key].PRCHoliday[elkey] === '1' ? (
+
+ 休
+
+ ) : (
+
+ 班
+
+ )
+ })
+ })
+ setDateMarkPresetData(allPRCDate)
+ })
+ }
+ }
+ // 合并用户自定义的日期信息作为presetData
+ const getAltCalendarData = allPRCDate => {
+ const allData = {}
+ altCalendar.length > 0 &&
+ altCalendar.forEach(item => {
+ const dateInfo = deconstructDate(item.date)
+ if (!Number.isNaN(dateInfo.year)) {
+ Object.assign(allData, {
+ [dateInfo.year + '/' + dateInfo.month + '/' + dateInfo.day]: item
+ })
+ }
+ })
+ return Object.assign(allPRCDate, allData)
+ }
+
+ useEffect(() => {
+ altCalendarPreset && getLunarPresetData()
+ dateMarkPreset && getMarkPresetData()
+ }, [])
+ return [altCalendarPresetData, dateMarkPresetData]
+}
+
+export default useAltData
diff --git a/components/date-picker/hooks/useCalenderData.js b/components/date-picker/hooks/useCalenderData.js
new file mode 100644
index 000000000..e6f4cb9d0
--- /dev/null
+++ b/components/date-picker/hooks/useCalenderData.js
@@ -0,0 +1,231 @@
+import { useState, useEffect } from 'react'
+import moment from 'moment'
+import { DAY_MILLISECONDS } from '../constants'
+import _ from 'lodash'
+
+const getYearOrMonthRows = ({
+ originDate,
+ renderDate,
+ type,
+ view,
+ range,
+ localeDatas
+}) => {
+ const _date = renderDate ? moment(renderDate) : moment()
+ const start = view === 'year' ? _date.year() - 4 : 0
+ let trs = [[], [], [], []]
+ let num = 0
+ const current = moment()
+ for (let i = 0; i < 4; i++) {
+ let row = trs[i]
+ for (let j = 0; j < 3; j++) {
+ let col = row[j] || (row[j] = { type: 'normal' })
+ const y = start + num
+ view === 'year'
+ ? (col.text = y)
+ : (col.text = localeDatas.datePicker.month[y])
+ col.value = y
+ num++
+ const currentYM = _date[view](y)
+ if (currentYM.isSame(current, view)) {
+ col.type = 'today'
+ }
+ if (type.includes('range') && type.includes(view)) {
+ if (
+ range.start &&
+ range.end &&
+ (currentYM.isBetween(range.start, range.end) ||
+ currentYM.isBetween(range.end, range.start))
+ ) {
+ col.range = true
+ }
+ if (range.start && currentYM.isSame(range.start, view)) {
+ col.type = 'selected'
+ col.range = false
+ }
+ if (range.end && currentYM.isSame(range.end, view)) {
+ col.type = 'selected'
+ col.range = false
+ }
+ continue
+ }
+ if (originDate && (y === originDate.year() || y === originDate.month())) {
+ col.type = 'selected'
+ }
+ }
+ }
+ return trs
+}
+const getTime = (week, y, m) => {
+ const r = new Date(y, m - 1, 1)
+ const t = r.getTime() - week * DAY_MILLISECONDS
+ return t
+}
+const getDateRows = ({
+ originDate,
+ range,
+ type,
+ weekOffset,
+ min,
+ max,
+ renderDate,
+ view
+}) => {
+ const rows = [[], [], [], [], [], []]
+ const today = moment()
+ let _date = moment(renderDate)
+ // * dayCount: 当月天数
+ // * lastMonthDayCount: 上月总天数
+ // * firstDayWeek: 当月第一天是周几
+ let firstDayWeek = _date.startOf('month').day() - weekOffset
+ if (firstDayWeek <= 0) {
+ // 如果为0 代表该月第一天是周日，在日历上需要第二行开始显示
+ firstDayWeek = 7
+ }
+ const startTimeByCurrentPanel = getTime(
+ firstDayWeek,
+ _date.year(),
+ _date.month() + 1
+ )
+ const dayCount = _date.daysInMonth()
+ const lastMonthDayCount = moment(_date)
+ .subtract(1, 'months')
+ .daysInMonth()
+ let count = 0
+ for (let i = 0; i < 6; i++) {
+ let row = rows[i]
+ for (let j = 0; j < 7; j++) {
+ let col =
+ row[j] ||
+ (row[j] = {
+ type: 'normal',
+ range: false,
+ rangeStart: false,
+ rangeEnd: false
+ })
+ const currentTime = moment(
+ startTimeByCurrentPanel + DAY_MILLISECONDS * (i * 7 + j)
+ )
+ let isPN = false // is Prev Or Next Month
+ const isDisabled =
+ currentTime.isBefore(moment(min)) || currentTime.isAfter(moment(max)) // isDisabled cell
+ if (i === 0) {
+ // 处理第一行的日期数据
+ if (j >= firstDayWeek) {
+ // 本月
+ col.value = ++count
+ } else {
+ // 上月
+ col.value = lastMonthDayCount - firstDayWeek + j + 1
+ col.type = 'prev'
+ isPN = true
+ }
+ } else {
+ ++count
+ if (count <= dayCount) {
+ // 本月
+ col.value = count
+ } else {
+ // 下月
+ col.value = count - dayCount
+ col.type = 'next'
+ isPN = true
+ }
+ }
+
+ if (isDisabled) {
+ col.type = 'disabled'
+ }
+ if (!isPN && currentTime.isSame(today, 'day')) {
+ col.type = 'today'
+ }
+ if (type.includes('range') && !isPN) {
+ if (
+ currentTime.isBetween(range.start, range.end) ||
+ currentTime.isBetween(range.end, range.start)
+ ) {
+ col.range = true
+ }
+ if (range.start && currentTime.isSame(range.start, 'day')) {
+ col.type = 'selected'
+ col.range = false
+ }
+ if (range.end && currentTime.isSame(range.end, 'day')) {
+ col.type = 'selected'
+ col.range = false
+ }
+ continue
+ }
+ if (originDate && currentTime.isSame(originDate, 'day') && !isPN) {
+ col.type = 'selected'
+ }
+
+ if (type === 'week') {
+ const weekNum = weekOffset ? currentTime.isoWeek() : currentTime.week()
+ row.weekNum = weekNum
+ if (originDate) {
+ const _d = _.cloneDeep(originDate)
+ const wFirst = moment(_d)
+ .startOf('week')
+ .add(weekOffset, 'days')
+ const wLast = moment(_d)
+ .endOf('week')
+ .add(weekOffset, 'days')
+ if (
+ currentTime.isSame(wFirst, 'day') ||
+ currentTime.isSame(wLast, 'day')
+ ) {
+ col.type = 'selected'
+ continue
+ }
+ if (currentTime.isBetween(wFirst, wLast)) {
+ col.type = 'normal'
+ col.range = true
+ }
+ }
+ }
+ }
+ }
+ return rows
+}
+const useDate = ({
+ view,
+ date,
+ originDate,
+ weekOffset,
+ localeDatas,
+ range,
+ type,
+ min,
+ max,
+ renderDate
+}) => {
+ const [rows, setRows] = useState([])
+ useEffect(() => {
+ const _rows =
+ view.includes('month') || view.includes('year')
+ ? getYearOrMonthRows({
+ originDate,
+ renderDate,
+ type,
+ view,
+ localeDatas,
+ range
+ })
+ : getDateRows({
+ originDate,
+ range,
+ type,
+ weekOffset,
+ min,
+ max,
+ renderDate,
+ view
+ })
+ setRows(_rows)
+ }, [renderDate, view, range])
+
+ return [rows]
+}
+
+export default useDate
diff --git a/components/date-picker/hooks/useDate.js b/components/date-picker/hooks/useDate.js
new file mode 100644
index 000000000..db7c61d5b
--- /dev/null
+++ b/components/date-picker/hooks/useDate.js
@@ -0,0 +1,27 @@
+import { useState, useEffect } from 'react'
+import moment from 'moment'
+import _ from 'lodash'
+const parseValue = (value, type) => {
+ if (!value) return [null]
+ const _value = moment(value)
+ const isValid = moment(value).isValid()
+ if (value && typeof value === 'object' && type.includes('range')) {
+ return [value.start ? moment(value.start) : null, value.end ? moment(value.end) : null]
+ }
+ return [isValid ? _value : null]
+}
+const useDate = ({ value, defaultValue, cacheDate, type }) => {
+ const [outDate, setOutDate] = useState([])
+ const changeOutDate = (dates) => {
+ setOutDate(_.cloneDeep(dates))
+ }
+ useEffect(() => {
+ const d = parseValue(value || defaultValue, type)
+ setOutDate(d)
+ cacheDate.current = d
+ }, [value])
+
+ return [outDate, changeOutDate]
+}
+
+export default useDate
diff --git a/components/date-picker/hooks/useFormat.js b/components/date-picker/hooks/useFormat.js
new file mode 100644
index 000000000..be83eb5b9
--- /dev/null
+++ b/components/date-picker/hooks/useFormat.js
@@ -0,0 +1,11 @@
+import { FORMATS } from '../constants'
+
+const useFormat = ({ type, showTime, format, locale = 'zh-CN' }) => {
+ let _format = format || FORMATS(locale)[type]
+ if (showTime && !/[H|h|m|s]/.test(_format)) {
+ _format += ' HH:mm:ss'
+ }
+ return [_format]
+}
+
+export default useFormat
diff --git a/components/date-picker/hooks/usePlaceholder.js b/components/date-picker/hooks/usePlaceholder.js
new file mode 100644
index 000000000..8da811761
--- /dev/null
+++ b/components/date-picker/hooks/usePlaceholder.js
@@ -0,0 +1,29 @@
+import { useState, useEffect } from 'react'
+
+const parsePlaceholder = ({ type, placeholder: _placeholder, showTime, localeDatas }) => {
+ const typePlaceholder = localeDatas.datePicker.placeholders[type]
+ const tempPlaceholder = showTime ? localeDatas.datePicker.placeholderTimeperiod : typePlaceholder || [localeDatas.datePicker.placeholder]
+
+ let leftPlaceholder = tempPlaceholder[0]
+ let rightPlaceholder = tempPlaceholder[1] || leftPlaceholder
+
+ if (_placeholder instanceof Array) {
+ leftPlaceholder = _placeholder[0]
+ rightPlaceholder = _placeholder[1] || _placeholder[0]
+ } else if (typeof placeholder === 'string') {
+ leftPlaceholder = _placeholder
+ rightPlaceholder = _placeholder
+ }
+ return [leftPlaceholder, rightPlaceholder]
+}
+const usePlaceholder = (args) => {
+ const [placeholders, setPlaceholders] = useState([])
+
+ useEffect(() => {
+ setPlaceholders(parsePlaceholder(args))
+ }, [])
+
+ return [placeholders]
+}
+
+export default usePlaceholder
diff --git a/components/date-picker/hooks/useTimePeriodData.js b/components/date-picker/hooks/useTimePeriodData.js
new file mode 100644
index 000000000..8c80afd9a
--- /dev/null
+++ b/components/date-picker/hooks/useTimePeriodData.js
@@ -0,0 +1,16 @@
+const useTimeperiodData = (timeInterval) => {
+ const segment = 24 * 60 / timeInterval
+ let pre = 0
+ let next = 0
+ let periodData = []
+ const func = (val) => (val < 10 ? '0' + val : val)
+ for (let i = 0; i < segment; i++) {
+ next += timeInterval
+ const time = func(parseInt(pre / 60)) + ':' + func(pre % 60) + ' ~ ' + func(parseInt(next / 60)) + ':' + func(next % 60)
+ periodData.push(time)
+ pre = next
+ }
+ return [periodData]
+}
+
+export default useTimeperiodData
diff --git a/components/date-picker/index.d.ts b/components/date-picker/index.d.ts
new file mode 100644
index 000000000..8288996ab
--- /dev/null
+++ b/components/date-picker/index.d.ts
@@ -0,0 +1,47 @@
+
+export type DateRange = {
+ start: Date | string | number | undefined | null
+ end: Date | string | number | undefined | null
+}
+type DateRangeString = {
+ start: string
+ end: string
+}
+type CalendarItem = {
+ date?: Date | string
+ text?: string
+ highlight?: boolean
+}
+export interface CommonProps {
+ value?: Date | string | number | DateRange | undefined | null
+ defaultValue?: Date | string | number | DateRange | undefined | null
+ disabled?: boolean
+ clearable?: boolean
+ placeholder?: string | string[]
+ format?: string
+ onChange?: (date: Date | DateRange, dateStr: string | DateRangeString) => void
+}
+type Shortcuts = {
+ title: string
+ range: Date[] | number[]
+}
+
+interface DateProps extends CommonProps {
+ type?: 'date' | 'daterange' | 'year' | 'month' | 'week' | 'weekrange' | 'timeperiod' | 'yearrange' | 'monthrange'
+ min?: Date
+ minDate?: Date
+ max?: Date
+ maxDate?: Date
+ disabledDate?: (currentDate: Date) => boolean
+ showTime?: boolean
+ shortcuts?: string[] | Shortcuts[]
+ weekOffset?: 0 | 1
+ altCalendar?: CalendarItem
+ altCalendarPreset?: 'zh-CN' | 'id-ID'
+ dateMarkRender?: (currentDate: Date, today: Date) => JSX.Element
+ dateMarkPreset?: 'zh-CN'
+ overlayClassName?: string
+}
+
+declare const DatePicker: React.ComponentType
-
-
- {this.renderHeader(type, leftDate, 'left')}
-
-
-
-
- {this.renderHeader(type, rightDate, 'right')}
-
-
-
-
+ {showMask && (
+
{isGroup && (
)}
diff --git a/components/dropdown/DropdownMenu.jsx b/components/dropdown/DropdownMenu.jsx
index c8b14947f..68b81ca43 100644
--- a/components/dropdown/DropdownMenu.jsx
+++ b/components/dropdown/DropdownMenu.jsx
@@ -6,7 +6,7 @@ import { prefixCls } from '.'
import DropdownMenuItem from './DropdownMenuItem'
class DropdownMenu extends React.Component {
- render () {
+ render() {
const {
data,
attachEle,
@@ -17,8 +17,10 @@ class DropdownMenu extends React.Component {
onChildMenuMouseEnter,
onChildMenuMouseLeave,
onMenuItemClick,
+ handleDocumentClick,
width,
- theme
+ theme,
+ overlayClassName
} = this.props
const menuCls = classNames(`${prefixCls}__menu`, `theme__${theme}`)
return (
@@ -26,12 +28,17 @@ class DropdownMenu extends React.Component {
className={`${prefixCls}__popper`}
show={visible}
attachEle={attachEle}
+ // container={document.body}
zIndex={1060}
placement={placement}
width={width}
onMouseEnter={onMouseEnter}
leftGap={0}
+ overlayClassName={overlayClassName}
onMouseLeave={onMouseLeave}
+ onClickOutside={() => {
+ handleDocumentClick && handleDocumentClick()
+ }}
>
{
+ if (maskClosable) {
+ onClose()
+ }
+ }}
+ />
+ )}
+
,
+ container || defaultContainer.current
+ )
+}
+
+export default DrawerComp
diff --git a/components/confirm/style/index.js b/components/drawer/style/index.js
similarity index 100%
rename from components/confirm/style/index.js
rename to components/drawer/style/index.js
diff --git a/components/drawer/style/index.scss b/components/drawer/style/index.scss
new file mode 100644
index 000000000..0d9c774a5
--- /dev/null
+++ b/components/drawer/style/index.scss
@@ -0,0 +1,82 @@
+@import '../../core-css/index.scss';
+
+$drawer: 'hi-drawer' !default;
+
+.#{$drawer} {
+ color: use-color('gray-80');
+ font-size: $font-size-normal;
+
+ &__mask {
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ height: 0;
+ z-index: 1000;
+ background: rgba(0, 0, 0, 0.45);
+ opacity: 0;
+ transition: opacity 0.3s, height 0s 0.3s;
+
+ &--visible {
+ opacity: 1;
+ height: 100%;
+ transition: opacity 0.3s;
+ }
+ }
+
+ &__wrapper {
+ width: 360px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background: use-color('white');
+ z-index: 1000;
+ top: 0;
+ position: fixed;
+ border-radius: 2px;
+ box-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.1);
+ transform: translateX(100%);
+ transition: transform 0.3s;
+
+ &--left {
+ left: 0;
+ transform: translateX(-100%);
+ }
+
+ &--right {
+ right: 0;
+ transform: translateX(100%);
+ }
+
+ &--visible {
+ transform: none;
+ }
+ }
+
+ &__header {
+ font-size: 16px;
+ color: use-color('gray-80');
+ font-weight: 500;
+ height: 54px;
+ border-bottom: 1px solid use-color('gray-30');
+ box-sizing: border-box;
+ padding: 0 24px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ &__content {
+ box-sizing: border-box;
+ overflow: auto;
+ flex: 1;
+ padding: 24px;
+ }
+
+ &__footer {
+ border-top: 1px solid use-color('gray-30');
+ padding: 12px;
+ flex-shrink: 0;
+ }
+}
diff --git a/components/dropdown/Dropdown.jsx b/components/dropdown/Dropdown.jsx
index 093a87da5..6bfcc1402 100644
--- a/components/dropdown/Dropdown.jsx
+++ b/components/dropdown/Dropdown.jsx
@@ -6,7 +6,11 @@ import DropdownMenu, { propTypesOfMenuData } from './DropdownMenu'
import Provider from '../context'
import { prefixCls } from '.'
-import { getIsTriggerEqualHover, getIsTriggerEqualContextmenu, trimTriggers } from './utils'
+import {
+ getIsTriggerEqualHover,
+ getIsTriggerEqualContextmenu,
+ trimTriggers
+} from './utils'
class Dropdown extends React.Component {
refDropdown = React.createRef()
timerHideMenu = null
@@ -22,31 +26,33 @@ class Dropdown extends React.Component {
}
}
}
- setPopperShow = (event) => {
- event.preventDefault()
+ setPopperShow = event => {
+ this.eventHandler(event)
clearTimeout(this.timerHideMenu)
this.setState({ visible: true })
}
- setPopperHide = (event) => {
- event.preventDefault()
+ setPopperHide = event => {
+ this.eventHandler(event)
this.setState({ visible: false })
}
- setPopperDelayHide = (event) => {
+ setPopperDelayHide = event => {
this.eventHandler(event)
this.timerHideMenu = setTimeout(() => {
this.setState({ visible: false })
}, 100)
}
+
toggleVisible = () => {
const { visible } = this.state
const toggleVisible = visible ? this.setPopperHide : this.setPopperShow
return toggleVisible
}
+
getPopperShowHandler = () => {
const { disabled } = this.props
if (disabled) return {}
const triggers = trimTriggers(this.props)
- const getHandler = (props) => {
+ const getHandler = props => {
if (getIsTriggerEqualHover(props)) {
return {
onMouseEnter: this.setPopperShow
@@ -61,14 +67,19 @@ class Dropdown extends React.Component {
onClick: this.toggleVisible()
}
}
- return triggers.reduce((prev, cur) => Object.assign(prev, getHandler(cur)), {})
+ return triggers.reduce(
+ (prev, cur) => Object.assign(prev, getHandler(cur)),
+ {}
+ )
}
getPopperHideHandler = () => {
const { disabled } = this.props
if (disabled) return {}
- return getIsTriggerEqualHover(this.props) ? {
- onMouseLeave: this.setPopperDelayHide
- } : {}
+ return getIsTriggerEqualHover(this.props)
+ ? {
+ onMouseLeave: this.setPopperDelayHide
+ }
+ : {}
}
handleMenuMouseLeave = () => {
getIsTriggerEqualHover(this.props) && this.setPopperDelayHide()
@@ -90,23 +101,32 @@ class Dropdown extends React.Component {
onClick && onClick(data)
}
- handleDocumentClick = (e) => {
- if (this.refDropdown.current) {
- !this.refDropdown.current.contains(e.target) && this.setState({ visible: false })
- }
- }
- componentWillUnmount () {
- document.removeEventListener('click', this.handleDocumentClick)
- document.removeEventListener('contextmenu', this.handleDocumentClick)
- }
- componentDidMount () {
- document.addEventListener('click', this.handleDocumentClick)
- document.addEventListener('contextmenu', this.handleDocumentClick)
+
+ handleDocumentClick = e => {
+ this.setState({ visible: false })
}
+
render () {
- const { className, style, title, type, placement, data, disabled, width, onButtonClick, theme } = this.props
+ const {
+ className,
+ style,
+ title,
+ type,
+ placement,
+ data,
+ disabled,
+ width,
+ onButtonClick,
+ theme,
+ overlayClassName
+ } = this.props
const { visible } = this.state
- const dropdownCls = classNames(prefixCls, prefixCls + '--' + type, className, disabled && `${prefixCls}--disabled`)
+ const dropdownCls = classNames(
+ prefixCls,
+ prefixCls + '--' + type,
+ className,
+ disabled && `${prefixCls}--disabled`
+ )
return (
+
+
+ {title}
+ {closable &&
+ {children}
+ {footer && {footer}
}
+ -
{data.map((item, index) => (
diff --git a/components/dropdown/DropdownMenuItem.jsx b/components/dropdown/DropdownMenuItem.jsx
index 4a8853e3a..909e74fc0 100644
--- a/components/dropdown/DropdownMenuItem.jsx
+++ b/components/dropdown/DropdownMenuItem.jsx
@@ -4,19 +4,27 @@ import Icon from '../icon'
import DropdownMenu from './DropdownMenu'
import { prefixCls } from '.'
-const MenuItemWrapper = forwardRef(({ href, children, disabled, ...props }, ref) => {
- const shouldUseLink = href && !disabled
- if (disabled) {
- Reflect.deleteProperty(props, 'onMouseEnter')
- Reflect.deleteProperty(props, 'onMouseLeave')
- Reflect.deleteProperty(props, 'onClick')
+const MenuItemWrapper = forwardRef(
+ ({ href, target, children, disabled, ...props }, ref) => {
+ const shouldUseLink = href && !disabled
+ if (disabled) {
+ Reflect.deleteProperty(props, 'onMouseEnter')
+ Reflect.deleteProperty(props, 'onMouseLeave')
+ Reflect.deleteProperty(props, 'onClick')
+ }
+ return (
+
+
+ )
+ }
+ return content
+ }
+
+ return
+
+ {_label}
+
+
+ -
+ {_currentOptions &&
+ _currentOptions.map((item) => {
+ if (item.children && item.id === levelActiveId) {
+ currentOptions = item.children
+ }
+ return renderRadioItem(item, levelActiveId, level)
+ })}
+
{renderCascadeContent()}
+}
+export default Provider(Filter)
diff --git a/components/table/checkbox/style/index.js b/components/filter/style/index.js
similarity index 100%
rename from components/table/checkbox/style/index.js
rename to components/filter/style/index.js
diff --git a/components/filter/style/index.scss b/components/filter/style/index.scss
new file mode 100644
index 000000000..b34140856
--- /dev/null
+++ b/components/filter/style/index.scss
@@ -0,0 +1,74 @@
+@import '../../core-css/index.scss';
+$filter: 'hi-filter' !default;
+
+.#{$filter} {
+ &-content {
+ display: flex;
+
+ &-items {
+ display: flex;
+ flex-wrap: wrap;
+ margin: 0;
+ padding: 0;
+ padding-left: 16px;
+ }
+
+ &-item {
+ position: relative;
+ height: 40px;
+ font-size: $font-size-normal;
+ color: use-color('black');
+ line-height: 40px;
+ margin-right: 40px;
+ cursor: pointer;
+ transition: all 0.3s;
+ list-style: none;
+ }
+
+ &-item__active {
+ color: use-color('primary');
+ }
+
+ &-item__disabled {
+ cursor: not-allowed;
+ opacity: 0.4;
+ }
+
+ &-item__active--underline {
+ position: absolute;
+ width: 24px;
+ height: 2px;
+ display: inline-block;
+ background-color: use-color('primary');
+ bottom: 0;
+ left: 50%;
+ right: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ &-label {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ height: 40px;
+
+ &__title {
+ display: inline-block;
+ width: 76px;
+ font-size: $font-size-normal;
+ color: use-color('gray-70');
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ &-label::after {
+ display: inline-block;
+ content: '';
+ width: 1px;
+ height: 14px;
+ background-color: #d8d8d8;
+ }
+ }
+}
diff --git a/components/form/Form.js b/components/form/Form.js
index a96056b0f..d7789aa63 100644
--- a/components/form/Form.js
+++ b/components/form/Form.js
@@ -1,110 +1,236 @@
-import React, { Component } from 'react'
+import React, { useEffect, useCallback, useReducer, forwardRef } from 'react'
+import _ from 'lodash'
import classNames from 'classnames'
import PropTypes from 'prop-types'
+import FormReducer, { FILEDS_UPDATE, FILEDS_UPDATE_LIST } from './FormReducer'
+import FormContext from './FormContext'
+import { transformValues } from './utils'
-class Form extends Component {
- constructor (props) {
- super(props)
+const getClassNames = (props) => {
+ const { labelPlacement, labelPosition, placement, inline, readOnly } = props
+ const _className = {}
- this.state = {
- fields: []
- }
+ if (labelPlacement || labelPosition) {
+ _className[`hi-form--label--${labelPlacement || labelPosition}`] = true
}
-
- getChildContext () {
- return {
- component: this
- }
- }
-
- getClassNames () {
- const { labelPlacement, labelPosition, placement, inline } = this.props
-
- const obj = {}
-
- if (labelPlacement || labelPosition) {
- obj[`hi-form--label--${labelPlacement || labelPosition}`] = true
- }
- if (placement === 'horizontal' || inline) {
- obj[`hi-form--inline`] = true
- }
-
- return obj
+ if (placement === 'horizontal' || inline) {
+ _className[`hi-form--inline`] = true
}
+ _className[`hi-form--readOnly`] = readOnly
+ return _className
+}
- addField (field) {
- this.setState((prevState) => ({
- fields: prevState.fields.concat(field)
- }))
- }
+const InternalForm = (props) => {
+ const {
+ children,
+ className,
+ style,
+ innerRef: formRef,
+ initialValues,
+ onValuesChange,
+ _type // SchemaForm 内部配置变量
+ } = props
+ const [state, dispatch] = useReducer(FormReducer, {
+ fields: [],
+ listNames: [],
+ listValues: {},
+ ...props
+ })
+ const { fields, listNames, listValues } = state
+ // 用户手动设置表单数据
+ const setFieldsValue = useCallback(
+ (values) => {
+ const _fields = _.cloneDeep(fields)
+ _fields.forEach((item) => {
+ const { field } = item
+ if (values.hasOwnProperty(field)) {
+ const value = values[field]
+ item.value = value
+ item.setValue(value)
+ }
+ })
+ dispatch({ type: FILEDS_UPDATE, payload: _fields })
+ // 处理 list value
+ Object.keys(values).forEach((key) => {
+ listNames.includes(key) &&
+ dispatch({
+ type: FILEDS_UPDATE_LIST,
+ payload: Object.assign({}, { ...listValues }, { [key]: values[key] })
+ })
+ })
+ },
+ [fields, listValues]
+ )
+ // 设置初始化的值
+ useEffect(() => {
+ // 处理 list value
+ initialValues &&
+ Object.keys(initialValues).forEach((key) => {
+ listNames.includes(key) &&
+ dispatch({
+ type: FILEDS_UPDATE_LIST,
+ payload: Object.assign({}, { ...listValues }, { [key]: initialValues[key] })
+ })
+ })
+ }, [])
+ // 转换值的输出
+ const internalValuesChange = useCallback(
+ (changeValues, allValues) => {
+ const _transformValues = transformValues(allValues, fields)
+ const _changeValues = _.cloneDeep(changeValues)
+
+ Object.keys(changeValues).forEach((changeValuesKey) => {
+ fields.forEach((filedItem) => {
+ const { field, _type, listname } = filedItem
+ if (field === changeValuesKey && _type === 'list') {
+ _changeValues[listname] = _transformValues[listname]
+ delete _changeValues[changeValuesKey]
+ }
+ })
+ })
- removeField (prop) {
- this.setState((prevState) => ({
- fields: prevState.fields.filter((field) => field.props.field !== prop)
- }))
- }
+ onValuesChange && onValuesChange(_changeValues, _transformValues)
+ },
+ [onValuesChange, fields]
+ )
+ // 重置校验
+ const resetValidates = useCallback(
+ (cb, resetNames, toDefault) => {
+ const changeValues = {}
+ const cacheallValues = {}
+ let _fields = _.cloneDeep(fields)
+ fields.forEach((item) => {
+ const { field, value } = item
+ cacheallValues[field] = value
+ })
- validate (cb) {
- let valid = true
- let count = 0
- const fields = this.state.fields
- if (fields.length === 0 && cb) {
- cb(valid)
- }
+ _fields = _fields.filter((childrenField) => {
+ return Array.isArray(resetNames) ? resetNames.includes(childrenField.field) : true
+ })
- fields.forEach((field) => {
- field.validate('', (errors) => {
- if (errors) {
- valid = false
- }
- if (typeof cb === 'function' && ++count === fields.length) {
- cb(valid)
+ _fields.forEach((childrenField) => {
+ const value =
+ toDefault && initialValues && initialValues[childrenField.field] ? initialValues[childrenField.field] : ''
+ if (!_.isEqual(childrenField.value, value)) {
+ changeValues[childrenField.field] = value
}
+
+ childrenField.value = value
+ childrenField.resetValidate(value)
})
- })
- }
- validateField (key, cb) {
- const field = this.state.fields.filter((field) => field.props.field === key)[0]
+ dispatch({ type: FILEDS_UPDATE, payload: _fields })
+ cb instanceof Function && cb()
+ // 比较耗性能
+ internalValuesChange(changeValues, Object.assign({}, { ...cacheallValues }, { ...changeValues }))
+ },
+ [fields, initialValues, onValuesChange]
+ )
+ // 对整个表单进行校验
+ const validate = useCallback(
+ (cb, validateNames) => {
+ const values = {}
+ let errors = {}
+
+ if (fields.length === 0 && cb) {
+ cb(values, errors)
+ return
+ }
+
+ const _fields = fields.filter((fieldChild) => {
+ const { field, value } = fieldChild
+ values[field] = value
+ return Array.isArray(validateNames) ? validateNames.includes(field) : true
+ })
- if (!field) {
- throw new Error('must call validate Field with valid key string!')
+ _fields.forEach((fieldChild) => {
+ const { field, value } = fieldChild
+ // 对指定的字段进行校验 其他字段过滤不校验
+ fieldChild.validate(
+ '',
+ (error) => {
+ if (error) {
+ const errorsMsg = error.map((err) => {
+ return err.message
+ })
+ errors[field] = { errors: errorsMsg }
+ }
+ },
+ value
+ )
+ })
+ errors = Object.keys(errors).length === 0 ? null : errors
+
+ cb && cb(transformValues(values, _fields), errors)
+ },
+ [fields]
+ )
+
+ const validateField = useCallback(
+ (key, cb) => {
+ let value
+ const field = fields.filter((fieldChild) => {
+ if (fieldChild.field === key) {
+ value = fieldChild.value
+ return true
+ }
+ })[0]
+
+ if (!field) {
+ throw new Error('must call validate Field with valid key string!')
+ }
+
+ field.validate(
+ '',
+ (error) => {
+ cb && cb(error)
+ },
+ value
+ )
+ },
+ [fields]
+ )
+
+ useEffect(() => {
+ if (!formRef) {
+ return
}
-
- field.validate('', cb)
- }
-
- resetValidates () {
- this.state.fields.forEach((field) => {
- field.resetValidate()
- })
- }
-
- render () {
- const { children, className, style } = this.props
-
- return (
-
- )
- }
+
+
+ )
}
-
-Form.childContextTypes = {
- component: PropTypes.any
-}
-
-Form.propTypes = {
- model: PropTypes.object,
+InternalForm.propTypes = {
rules: PropTypes.object,
labelPlacement: PropTypes.oneOf(['right', 'left', 'top']),
labelPosition: PropTypes.oneOf(['right', 'left', 'top']),
@@ -116,10 +242,12 @@ Form.propTypes = {
className: PropTypes.string,
style: PropTypes.object
}
-
-Form.defaultProps = {
+InternalForm.defaultProps = {
size: 'small',
showColon: true
}
+const Form = forwardRef((props, ref) => {
+ return
- {
- (label || label === '') ? (
-
- ) : (
-
- )
- }
-
- {Array.isArray(children) || !children
- ? children
- : React.cloneElement(children, {
- onChange: (...args) => {
- children.props.onChange && children.props.onChange(...args)
- setTimeout(() => {
- this.handleFieldChange()
- })
- },
- onBlur: (...args) => {
- children.props.onBlur && children.props.onBlur(...args)
- setTimeout(() => {
- this.handleFieldBlur()
- })
- }
- })}
-
{error}
+ const obj = {}
+ obj['hi-form-item__error'] = error !== ''
+ obj['hi-form-item--validating'] = validating
+ obj['hi-form-item--required'] = isRequired() || required
+ const _labelWidth = labelWidth()
+ const contentWidth =
+ formProps.labelPosition !== 'top' && rectCont && rectCont.width ? rectCont.width - _labelWidth : '100%'
+ return (
+
+ {label || label === '' ? (
+
+ ) : (
+
+ )}
+
+ )
}
FormItem.propTypes = {
- field: PropTypes.string,
+ field: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.number]),
rules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
required: PropTypes.bool,
label: PropTypes.string,
@@ -216,5 +352,4 @@ FormItem.propTypes = {
FormItem.defaultProps = {
size: 'small'
}
-
export default depreactedPropsCompat([['field', 'prop']])(FormItem)
diff --git a/components/form/List.js b/components/form/List.js
new file mode 100644
index 000000000..fd402102f
--- /dev/null
+++ b/components/form/List.js
@@ -0,0 +1,68 @@
+import React, { useContext, useState, useEffect } from 'react'
+
+import FormContext from './FormContext'
+import { FILEDS_REMOVE, FILEDS_INIT_LIST, FILEDS_UPDATE } from './FormReducer'
+const List = (props) => {
+ const { dispatch, formState } = useContext(FormContext)
+ const { children, name } = props
+ const [listCount, setListCount] = useState([])
+ const { listValues } = formState
+
+ useEffect(() => {
+ // init listName
+ dispatch({ type: FILEDS_INIT_LIST, payload: name })
+ }, [])
+
+ // manage default value
+ useEffect(() => {
+ const cachelistCount = []
+ const { fields } = formState
+
+ const _fields = fields.filter((item) => {
+ return item.listname !== name
+ })
+ const values = listValues[name] ? listValues[name] : []
+ values.forEach((value, index) => {
+ const uuid = parseInt((Math.random() * 9 + 1) * 100000)
+ cachelistCount.push({
+ field: name + '-' + uuid,
+ listItemValue: value,
+ sort: index
+ })
+ })
+ dispatch({ type: FILEDS_UPDATE, payload: _fields })
+ setListCount(cachelistCount)
+ }, [listValues])
+
+ if (typeof children !== 'function') {
+ console.warning('Form.List only accepts function as children.')
+ return null
+ }
+
+ const add = () => {
+ const uuid = parseInt((Math.random() * 9 + 1) * 100000)
+ setListCount(
+ listCount.concat({
+ field: name + '-' + uuid,
+ sort: listCount.length
+ })
+ )
+ }
+
+ const remove = (fieldItem) => {
+ const _listCount = listCount.filter((item) => {
+ return item.field !== fieldItem.field
+ })
+ setListCount(_listCount)
+ dispatch({ type: FILEDS_REMOVE, payload: fieldItem.field })
+ }
+ return (
+
+
- )
- }
-}
-
-FormItem.contextTypes = {
- component: PropTypes.any
+
+ {renderChildren()}
+
+
+ {error}
+
+ {children(listCount, { add, remove })}
+
+
+ )
+}
+
+export default List
diff --git a/components/form/Reset.js b/components/form/Reset.js
new file mode 100644
index 000000000..a7dba08dd
--- /dev/null
+++ b/components/form/Reset.js
@@ -0,0 +1,19 @@
+import React, { useContext } from 'react'
+
+import FormContext from './FormContext'
+
+import Button from '../button'
+
+const Reset = (props) => {
+ const { children = 'reset', onClick, fields: resetNames, toDefault = true } = props
+ const { resetValidates } = useContext(FormContext)
+ const reset = () => {
+ resetValidates(onClick, resetNames, toDefault)
+ }
+ return (
+
+ )
+}
+export default Reset
diff --git a/components/form/SchemaForm.js b/components/form/SchemaForm.js
new file mode 100644
index 000000000..7ec77b2f5
--- /dev/null
+++ b/components/form/SchemaForm.js
@@ -0,0 +1,63 @@
+import React, { useState, useEffect, useCallback, forwardRef } from 'react'
+import _ from 'lodash'
+import * as HIUI from '../'
+import Provider from '../context'
+import Form from './Form'
+import FormItem from './Item'
+import FormReset from './Reset'
+import FormSubmit from './Submit'
+
+const Group = {
+ 'Radio.Group': HIUI.Radio.Group,
+ 'Checkbox.Group': HIUI.Checkbox.Group
+}
+const prefixCls = 'hi-form-schema'
+
+const FormComponent = Provider(Form)
+
+const InternalSchemaForm = (props) => {
+ const { schema: schemaProps, children: childrenProps, submit, reset, innerRef } = props
+ const [schema, setSchema] = useState(schemaProps)
+ useEffect(() => {
+ setSchema(schemaProps)
+ }, [schemaProps])
+
+ const renderSchemaFormItem = useCallback(() => {
+ if (Array.isArray(schema)) {
+ return schema.map((schemaItem, index) => {
+ const { component, componentProps } = schemaItem
+ let child = null
+ if (HIUI[component] || Group[component]) {
+ const ChildComponent = HIUI[component] || Group[component]
+ child = {'not found ' + component}
+ } + return React.createElement(FormItem, { + ..._.omit(schemaItem, 'component', 'componentProps'), + key: component + index, + children: child + }) + }) + } + }, [schema]) + return ( +
+
+ {renderSchemaFormItem()}
+ {childrenProps}
+ {(submit || reset) && (
+
+ {submit &&
+ )}
+
+
+ )
+}
+
+const SchemaForm = forwardRef((props, ref) => {
+ return
-
@@ -137,7 +146,7 @@ class Demo2 extends React.Component {
name: [
{
required: true,
- message: 请输入名称,
+ message: 请输入名称,
trigger: 'onBlur,onChange'
}
],
@@ -157,9 +166,9 @@ class Demo2 extends React.Component {
{
validator: (rule, value, cb) => {
const count = parseInt(value)
- if(isNaN(count)) {
+ if (isNaN(count)) {
cb('请输入数字')
- } else if(count <= 0) {
+ } else if (count <= 0) {
cb('必须是正数')
} else {
cb()
@@ -174,7 +183,7 @@ class Demo2 extends React.Component {
handleSubmit() {
this.form.current.validate(valid => {
- if(valid) {
+ if (valid) {
console.log(this.state.form)
alert('submit')
} else {
@@ -184,21 +193,26 @@ class Demo2 extends React.Component {
})
}
-
- render(){
+ render() {
const Row = Grid.Row
const Col = Grid.Col
- const {form} = this.state
+ const { form } = this.state
return (
-
@@ -218,13 +232,13 @@ class Demo3 extends React.Component {
region: '',
count: ''
},
- checkedIndex: -1,
+ checkedIndex: -1
}
}
handleSubmit() {
this.form.current.validate(valid => {
- if(valid) {
+ if (valid) {
console.log(this.state.form)
alert('submit')
} else {
@@ -234,22 +248,23 @@ class Demo3 extends React.Component {
})
}
- render(){
+ render() {
const Row = Grid.Row
const Col = Grid.Col
- const {form} = this.state
+ const { form } = this.state
return (
-
@@ -261,11 +276,11 @@ describe('Form', () => {
it('should have the correct placement', () => {
const wrapper = mount(
)
@@ -281,22 +296,22 @@ describe('Form', () => {
;['left', 'right', 'top'].forEach(labelPlacement => {
const wrapper = mount(
)
expect(wrapper.find(`.hi-form--label--${labelPlacement}`)).toHaveLength(1)
const wrapperLegacy = mount(
)
@@ -309,16 +324,18 @@ describe('Form', () => {
it('should have the label width', () => {
const wrapper = mount(
)
expect(
- wrapper.find('label.hi-form-item__label').map(label => label.prop('style').width)
+ wrapper
+ .find('label.hi-form-item__label')
+ .map(label => label.prop('style').width)
).toEqual([50, 50])
wrapper.unmount()
})
@@ -326,41 +343,38 @@ describe('Form', () => {
it('should show colon', () => {
const wrapper = mount(
)
- expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
- '账号：',
- '密码：'
- ])
+ expect(
+ wrapper.find('label.hi-form-item__label').map(label => label.text())
+ ).toEqual(['账号：', '密码：'])
wrapper.setProps({ showColon: false })
- expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
- '账号',
- '密码'
- ])
+ expect(
+ wrapper.find('label.hi-form-item__label').map(label => label.text())
+ ).toEqual(['账号', '密码'])
wrapper.unmount()
})
it('should field has colon when field showColon is true and form showColon is false', () => {
const wrapper = mount(
)
- expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
- '账号：',
- '密码'
- ])
+ expect(
+ wrapper.find('label.hi-form-item__label').map(label => label.text())
+ ).toEqual(['账号：', '密码'])
wrapper.unmount()
})
@@ -386,9 +400,9 @@ describe('Form', () => {
name: ''
}}
>
-
+
{
wrapper.setProps({ model: { name: e.target.value } })
}}
@@ -399,7 +413,9 @@ describe('Form', () => {
)
const cb = jest.fn()
wrapper.instance().validate(cb)
- expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual(
+ '请输入名称'
+ )
wrapper.find('input').simulate('change', { target: { value: 'hiui' } })
jest.runAllTimers()
wrapper.instance().validate(cb)
@@ -409,7 +425,9 @@ describe('Form', () => {
wrapper.find('input').simulate('blur')
jest.runAllTimers()
expect(blurCb).toHaveBeenCalled()
- expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual(
+ '请输入名称'
+ )
wrapper.unmount()
jest.useRealTimers()
@@ -436,9 +454,9 @@ describe('Form', () => {
name: ''
}}
>
-
+
{
wrapper.setProps({ model: { name: e.target.value } })
}}
@@ -449,7 +467,9 @@ describe('Form', () => {
)
const cb = jest.fn()
wrapper.instance().validateField('name', cb)
- expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual(
+ '请输入名称'
+ )
wrapper.find('input').simulate('change', { target: { value: 'hiui' } })
jest.runAllTimers()
wrapper.instance().validate(cb)
@@ -459,33 +479,47 @@ describe('Form', () => {
jest.useRealTimers()
})
- it('cancelSubmit resetValidates',()=>{
- const wrapper = mount (
-
+ {
+ wrapper.setProps({ model: { name: e.target.value } })
+ }}
+ onBlur={blurCb}
+ />
+
+
+ )
+ const cb = jest.fn()
+ wrapper.instance().validate(cb)
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ wrapper.find('input').simulate('change', { target: { value: 'hiui' } })
+ jest.runAllTimers()
+ wrapper.instance().validate(cb)
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('')
+ wrapper.find('input').simulate('change', { target: { value: '' } })
+ jest.runAllTimers()
+ wrapper.find('input').simulate('blur')
+ jest.runAllTimers()
+ expect(blurCb).toHaveBeenCalled()
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ wrapper.unmount()
+
+ jest.useRealTimers()
+ })
+
+ it('should validate single field', () => {
+ jest.useFakeTimers()
+ const localeDatas = {
+ form: {
+ colon: '：'
+ }
+ }
+ const wrapper = mount(
+ <_Form
+ rules={{
+ name: {
+ required: true,
+ message: '请输入名称',
+ trigger: 'onChange'
+ }
+ }}
+ localeDatas={localeDatas}
+ model={{
+ name: ''
+ }}
+ >
+
+ {
+ wrapper.setProps({ model: { name: e.target.value } })
+ }}
+ onBlur={jest.fn()}
+ />
+
+
+ )
+ const cb = jest.fn()
+ wrapper.instance().validateField('name', cb)
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('请输入名称')
+ wrapper.find('input').simulate('change', { target: { value: 'hiui' } })
+ jest.runAllTimers()
+ wrapper.instance().validate(cb)
+ expect(wrapper.find('.hi-form-item--msg__error').text()).toEqual('')
+ expect(() => wrapper.instance().validateField('errorField', cb)).toThrow()
+ wrapper.unmount()
+
+ jest.useRealTimers()
+ })
+ it('cancelSubmit resetValidates',()=>{
+ const wrapper = mount (
+ {
+}
+declare class SchemaForm extends React.Component {
+}
+declare class Form extends React.Component {
+ static Item = Item
+ static SchemaForm = SchemaForm
+ static FormReset = FormReset
+}
+
+export default Form
diff --git a/components/form/index.js b/components/form/index.js
index ccdc24296..6ec479600 100644
--- a/components/form/index.js
+++ b/components/form/index.js
@@ -1,8 +1,25 @@
-import Form from './Form'
+import LegacyForm, { Item as ItemV2 } from './form-legacy/form-v2'
+import FormV3 from './Form'
import Item from './Item'
+import Submit from './Submit'
+import Reset from './Reset'
+import List from './List'
+import SchemaForm from './SchemaForm'
+import useForm from './hooks/useForm'
+
import Provider from '../context'
import './style/index'
-const FormWrapper = Provider(Form)
-FormWrapper.Item = Item
-export default FormWrapper
+LegacyForm.Item = ItemV2
+
+const Form = Provider(FormV3)
+
+Form.Item = Item
+Form.Submit = Submit
+Form.Reset = Reset
+Form.List = List
+Form.SchemaForm = SchemaForm
+Form.useForm = useForm
+
+export default Form
+export { LegacyForm }
diff --git a/components/form/style/index.scss b/components/form/style/index.scss
index ded932442..4a277389b 100644
--- a/components/form/style/index.scss
+++ b/components/form/style/index.scss
@@ -1,4 +1,4 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
.hi-form {
max-width: 100%;
@@ -16,7 +16,7 @@
legend {
margin: 0 0 16px;
- color: $gray-darker;
+ color: use-color('gray-80');
}
&--inline {
@@ -24,12 +24,16 @@
flex-wrap: wrap;
}
+ &--readOnly {
+ pointer-events: none;
+ }
+
&__title {
box-sizing: border-box;
margin-top: 0;
margin-bottom: 24px;
- font-size: 16px;
- font-weight: 400;
+ font-size: $font-size-large;
+ font-weight: $font-weight-normal;
}
&--label--left {
@@ -77,7 +81,7 @@
flex-shrink: 0;
box-sizing: border-box;
vertical-align: top;
- color: $gray-darker;
+ color: use-color('gray-80');
overflow-wrap: break-word;
}
@@ -92,6 +96,17 @@
position: relative;
vertical-align: top;
min-height: 32px;
+ flex-shrink: 0;
+
+ p {
+ margin: 0;
+ padding: 0;
+ }
+ }
+
+ &__children {
+ display: flex;
+ min-height: 30px;
}
&__error {
@@ -113,8 +128,16 @@
padding: 2px 0;
box-sizing: border-box;
line-height: 20px;
+ transition: all 0.3s;
+ transform: translateY(-10%);
+ opacity: 0;
color: get-color($palette-secondary, 'danger');
+ &__show {
+ opacity: 1;
+ transform: translateY(0);
+ }
+
.hi-form--inline & {
top: 36px;
left: 0;
@@ -135,4 +158,8 @@
top: 0;
right: 0;
}
+
+ .hi-checkbox-group {
+ line-height: 32px;
+ }
}
diff --git a/components/form/utils.js b/components/form/utils.js
new file mode 100644
index 000000000..9cfefa0ad
--- /dev/null
+++ b/components/form/utils.js
@@ -0,0 +1,53 @@
+import _ from 'lodash'
+
+// 需要做一个filed的规则解析
+const tranformListValues = (field, listNestValues, value, listname) => {
+ const key = field.split('#')[1]
+ const keyName = field.split('#')[0]
+ if (listNestValues[listname][keyName]) {
+ listNestValues[listname][keyName] = _.merge(listNestValues[listname][keyName], {
+ [key]: value
+ })
+ } else {
+ listNestValues[listname][keyName] = { [key]: value }
+ }
+}
+// 转换输出的值
+export const transformValues = (allvalue, fields) => {
+ let tranformValues = {}
+ const listNestValues = {}
+ // 根据sort进行数据排列
+ const sortfields = _.sortBy(fields, ['sort'])
+ sortfields.forEach((filedItem) => {
+ const { field, propsField, _type, listname } = filedItem
+ if (_type === 'list') {
+ if (propsField !== field) {
+ listNestValues[listname] = listNestValues[listname] || {}
+ tranformListValues(field, listNestValues, allvalue[field], listname)
+ Object.keys(listNestValues).forEach((key) => {
+ const arr = []
+ Object.keys(listNestValues[key]).forEach((item) => {
+ arr.push(listNestValues[key][item])
+ })
+ tranformValues[key] = arr
+ })
+ return
+ }
+ if (tranformValues[listname]) {
+ tranformValues[listname].push(allvalue[field])
+ } else {
+ tranformValues[listname] = [allvalue[field]]
+ }
+ } else {
+ if (Array.isArray(propsField)) {
+ const chainKeys = propsField.reduceRight((pre, next) => {
+ return { [next]: pre }
+ }, allvalue[field])
+ tranformValues = _.merge(tranformValues, chainKeys)
+ } else {
+ tranformValues = _.merge(tranformValues, { [field]: allvalue[field] })
+ }
+ }
+ })
+ return tranformValues
+}
diff --git a/components/grid/index.d.ts b/components/grid/index.d.ts
new file mode 100644
index 000000000..20a75d297
--- /dev/null
+++ b/components/grid/index.d.ts
@@ -0,0 +1,22 @@
+import { CSSProperties } from "react"
+
+interface GridProps {
+}
+interface RowProps {
+ justify?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between '
+ gutter?: boolean
+}
+interface ColProps {
+ justify?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between '
+ span?: number
+ offset?: number
+}
+declare class Row extends React.Component {
+}
+declare class Col extends React.Component {
+}
+declare class Grid extends React.Component {
+ static Row = Row
+ static Col = Col
+}
+export default Grid
diff --git a/components/grid/style/index.scss b/components/grid/style/index.scss
index 8e6f03293..46ecbadaa 100644
--- a/components/grid/style/index.scss
+++ b/components/grid/style/index.scss
@@ -1,4 +1,4 @@
-@import '@hi-ui/core-css/index.scss';
+@import '../../core-css/index.scss';
// Rows
.hi-grid__row {
diff --git a/components/icon/iconfont.js b/components/icon/iconfont.js
new file mode 100644
index 000000000..4fb4b4ead
--- /dev/null
+++ b/components/icon/iconfont.js
@@ -0,0 +1,59 @@
+!(function (a) {
+ var l
+ var h
+ var o
+ var v
+ var i
+ var t
+ var d =
+ ''
+ var m = (m = document.getElementsByTagName('script'))[m.length - 1].getAttribute('data-injectcss')
+ if (m && !a.__iconfont__svg__cssinject__) {
+ a.__iconfont__svg__cssinject__ = !0
+ try {
+ document.write(
+ ''
+ )
+ } catch (a) {
+ console && console.log(a)
+ }
+ }
+ function c() {
+ i || ((i = !0), o())
+ }
+ ;(l = function () {
+ var a, l, h, o
+ ;((o = document.createElement('div')).innerHTML = d),
+ (d = null),
+ (h = o.getElementsByTagName('svg')[0]) &&
+ (h.setAttribute('aria-hidden', 'true'),
+ (h.style.position = 'absolute'),
+ (h.style.width = 0),
+ (h.style.height = 0),
+ (h.style.overflow = 'hidden'),
+ (a = h),
+ (l = document.body).firstChild ? ((o = a), (h = l.firstChild).parentNode.insertBefore(o, h)) : l.appendChild(a))
+ }),
+ document.addEventListener
+ ? ~['complete', 'loaded', 'interactive'].indexOf(document.readyState)
+ ? setTimeout(l, 0)
+ : ((h = function () {
+ document.removeEventListener('DOMContentLoaded', h, !1), l()
+ }),
+ document.addEventListener('DOMContentLoaded', h, !1))
+ : document.attachEvent &&
+ ((o = l),
+ (v = a.document),
+ (i = !1),
+ (t = function () {
+ try {
+ v.documentElement.doScroll('left')
+ } catch (a) {
+ return void setTimeout(t, 50)
+ }
+ c()
+ })(),
+ (v.onreadystatechange = function () {
+ v.readyState == 'complete' && ((v.onreadystatechange = null), c())
+ }))
+})(window)
diff --git a/components/icon/index.js b/components/icon/index.js
index 1c0d96cf5..4dc158c78 100644
--- a/components/icon/index.js
+++ b/components/icon/index.js
@@ -1,15 +1,73 @@
import React from 'react'
import classNames from 'classnames'
-import './style/index'
-
-class Icon extends React.Component {
- render () {
- const {className, name, style, ...rest} = this.props
- const iconCls = classNames(`hi-icon`, `icon-${name}`, className)
+import './style/index'
+import './iconfont.js'
- return
- }
+// 旧版本 icon name 兼容映射
+const legacyMap = {
+ top: 'to-top',
+ bottom: 'to-bottom',
+ 'check-circle-o': 'check-circle',
+ 'close-circle-o': 'close-circle',
+ ratio: 'equal-proportion',
+ stattistics: 'pie-chart',
+ freezing: 'freeze-column',
+ caveat: 'warning',
+ noapi: 'show-code',
+ api: 'close-code',
+ web: 'webpage',
+ voice: 'audio',
+ usergroup: 'users',
+ 'upload-cloud': 'cloud-upload',
+ telephone: 'phone',
+ store: 'shop',
+ set: 'setting',
+ repeat: 'time-rewind',
+ qr: 'qr-code',
+ plugin: 'duplicate',
+ prompt: 'bell',
+ process: 'diagram',
+ 'problem-circle-o': 'question-circle',
+ position: 'location',
+ pic: 'picture',
+ pc: 'monitor',
+ move: 'drag',
+ 'move-to': 'folder-move',
+ more: 'ellipsis',
+ 'more-circle-o': 'ellipsis-circle',
+ mark: 'pin',
+ 'mail-delivery': 'mail-send',
+ linechart: 'bar-chart',
+ label: 'tag',
+ internet: 'global',
+ info: 'document-exclamation',
+ 'info-circle-o': 'info-circle',
+ hide: 'eye-invisible',
+ component: 'relation',
+ data: 'data-monitor',
+ 'money-circle-o': 'rmb',
+ refer: 'document-search'
}
+const Icon = ({ name, filled = false, className, style = {}, onClick }) => {
+ return (
+
+ )
+}
export default Icon
diff --git a/components/icon/style/index.js b/components/icon/style/index.js
index 522460139..63810a681 100644
--- a/components/icon/style/index.js
+++ b/components/icon/style/index.js
@@ -1 +1 @@
-import '../../style/icon/index.scss'
+import './index.scss'
diff --git a/components/icon/style/index.scss b/components/icon/style/index.scss
new file mode 100644
index 000000000..d985b903c
--- /dev/null
+++ b/components/icon/style/index.scss
@@ -0,0 +1,7 @@
+svg.hi-icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em !important;
+ fill: currentColor;
+ overflow: hidden;
+}
diff --git a/components/index.d.ts b/components/index.d.ts
new file mode 100644
index 000000000..0a6e5c841
--- /dev/null
+++ b/components/index.d.ts
@@ -0,0 +1,41 @@
+export { default as Button } from './button'
+export { default as Card } from './card/index'
+export { default as Checkbox } from './checkbox'
+export { default as Carousel } from './carousel'
+export { default as Cascader } from './cascader'
+export { default as Collapse } from './collapse'
+export { default as Counter } from './counter'
+export { default as Datepicker } from './date-picker'
+export { default as TimePicker } from './date-picker/TimePicker'
+export { default as Dropdown } from './dropdown'
+export { default as Form } from './form'
+export { default as Grid } from './grid'
+export { default as Input } from './input'
+export { default as Loading } from './loading'
+export { default as Menu } from './menu'
+export { default as Message } from './message'
+export { default as Modal } from './modal'
+export { default as Notification } from './notification'
+export { default as Pagination } from './pagination'
+export { default as Popover } from './popover'
+export { default as Progress } from './progress'
+export { default as Radio } from './radio'
+export { default as Rate } from './rate'
+export { default as Select } from './select'
+export { default as Stepper } from './stepper'
+export { default as Switch } from './switch'
+export { default as Table } from './table'
+export { default as Tabs } from './tabs'
+export { default as Tag } from './tag'
+export { default as Timeline } from './timeline'
+export { default as Tooltip } from './tooltip'
+export { default as Transfer } from './transfer'
+export { default as Tree } from './tree'
+export { default as Upload } from './upload'
+export { default as Watermark } from './watermark'
+export { default as List } from './list'
+export { default as SelectTree } from './select-tree'
+export { default as Filter } from './filter'
+export { default as Drawer } from './drawer'
+export { default as Search } from './search'
+export { default as Slider } from './slider'
diff --git a/components/index.js b/components/index.js
index c870cc54e..dc8657442 100755
--- a/components/index.js
+++ b/components/index.js
@@ -3,13 +3,15 @@ export { default as Dropdown } from './dropdown'
export { default as Pagination } from './pagination'
export { default as Tabs } from './tabs'
export { default as Table } from './table'
+export { LegacyTable } from './table'
export { default as Notification } from './notification'
export { default as handleNotificate } from './notification/HandleNotification'
export { default as Modal } from './modal'
+export { default as Drawer } from './drawer'
export { default as Alert } from './alert'
-export { default as Panel } from './panel'
export { default as Collapse } from './collapse'
export { default as Select } from './select'
+export { default as SelectTree } from './select-tree'
export { default as Cascader } from './cascader'
export { default as Tooltip } from './tooltip'
export { default as Popover } from './popover'
@@ -19,17 +21,18 @@ export { default as Upload } from './upload'
export { default as Tree } from './tree'
export { default as Input } from './input'
export { default as DatePicker } from './date-picker'
-export { default as TimePicker } from './date-picker/TimePicker'
+export { TimePicker } from './date-picker'
export { default as Counter } from './counter'
-export { default as NavMenu } from './nav-menu'
export { default as Badge } from './badge'
export { default as Radio } from './radio'
export { default as Checkbox } from './checkbox'
export { default as Grid } from './grid'
export { default as Layout } from './grid'
export { default as Stepper } from './stepper'
-export { default as confirm } from './confirm'
+
export { default as Form } from './form'
+export { LegacyForm } from './form'
+
export { default as Menu } from './menu'
export { default as FormItem } from './form/Item'
export { default as Ficon } from './ficon'
@@ -45,4 +48,7 @@ export { default as Tag } from './tag'
export { default as Breadcrumb } from './breadcrumb'
export { default as Carousel } from './carousel'
export { default as Watermark } from './watermark'
+export { default as Slider } from './slider'
+export { default as Search } from './search'
export { ThemeContext, LocaleContext } from './context'
+export { default as HiRequest } from './_util/hi-request'
diff --git a/components/input/Input.js b/components/input/Input.js
index 5685c625b..61b524654 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -7,8 +7,7 @@ import { format, formatValue, getAttrs, formatAmount, filterObjProps } from './u
* @prop type 输入框类型
*/
class Input extends Component {
-
- constructor (props) {
+ constructor(props) {
super(props)
this._Input = React.createRef()
@@ -44,7 +43,7 @@ class Input extends Component {
}
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
if (nextProps.value !== undefined) {
if (nextProps.value !== this.state.value) {
this.setState({
@@ -67,9 +66,11 @@ class Input extends Component {
})
}
}
+
focus = () => {
this._Input.current.focus()
}
+
blur = () => {
this._Input.current.blur()
}
@@ -77,10 +78,10 @@ class Input extends Component {
/**
* 渲染 text 输入框
*/
- renderText () {
+ renderText() {
let { hover, active, value } = this.state
// clearableTrigger 为内部预留，主要表示清除按钮的触发形态，类型分为 'hover' 和 ‘always’
- let { disabled, type, id, placeholder, clearable, clearableTrigger = 'hover' } = this.props
+ let { disabled, type, id, placeholder, clearable, clearableTrigger = 'hover',localeDatas } = this.props
let { prefix, suffix, prepend, append } = this.state
const noClear = ['textarea']
let prefixId = id ? id + '_prefix' : ''
@@ -234,7 +235,7 @@ class Input extends Component {
/**
* 渲染 textarea
*/
- renderTextarea () {
+ renderTextarea() {
let { active } = this.state
let { disabled, theme } = this.props
const { defaultValue, ...attrs } = this.attrs
@@ -316,7 +317,7 @@ class Input extends Component {
)
}
- render () {
+ render() {
const { type } = this.attrs
const { size, id, className, required, theme } = this.props
diff --git a/components/input/index.d.ts b/components/input/index.d.ts
new file mode 100644
index 000000000..53b639d9b
--- /dev/null
+++ b/components/input/index.d.ts
@@ -0,0 +1,19 @@
+interface Props {
+ type?: 'text' | 'textarea' | 'id' | 'tel' | 'card' | 'amount' | 'email'
+ value?: string | number
+ defaultValue?: string | number
+ prepend?: string | JSX.Element
+ append?: string | JSX.Element
+ disabled?: boolean
+ clearable?: boolean
+ placeholder?: string
+ onFocus?: (e: React.FocusEvent) => void
+ onBlur?: (e: React.FocusEvent) => void
+ onKeyDown?: (e: React.KeyboardEvent) => void
+ onKeyPress?: (e: React.KeyboardEvent) => void
+ onKeyUp?: (e: React.KeyboardEvent) => void
+ onInput?: (e: React.FormEvent) => void
+ onChange?: (e: React.ChangeEvent) => void
+}
+declare const Input: React.ComponentType
+export default Input
diff --git a/components/input/index.js b/components/input/index.js
index 3a3275926..23c1c1e7a 100644
--- a/components/input/index.js
+++ b/components/input/index.js
@@ -5,7 +5,8 @@ import './style/index'
import InputLegacy from './input-legacy'
import Provider from '../context'
-function SwitchVersion (component = {}, componentLegacy = {}) {
+function SwitchVersion(component = {}, componentLegacy = {}) {
+ // eslint-disable-next-line react/display-name
return forwardRef((props, ref) => {
const InnerComponent = props.legacy === true ? componentLegacy : component
return
+export default List
diff --git a/components/list/index.js b/components/list/index.js
new file mode 100644
index 000000000..fe2c94647
--- /dev/null
+++ b/components/list/index.js
@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react'
+import classNames from 'classnames'
+
+import Pagination from '../pagination'
+import Item from './Item'
+import IconText from './IconText'
+import './style'
+
+const prefixCls = 'hi-list'
+
+const getPagePosition = pagination => {
+ let pagePosition = 'flex-end'
+ switch (pagination.position) {
+ case 'left':
+ pagePosition = 'start'
+ break
+ case 'middle':
+ pagePosition = 'center'
+ break
+
+ case 'right':
+ pagePosition = 'flex-end'
+ break
+ default:
+ pagePosition = 'flex-end'
+ }
+ return pagePosition
+}
+const getActionPosition = actionPosition => {
+ let _actionPosition = 'flex-end'
+ switch (actionPosition) {
+ case 'top':
+ _actionPosition = 'flex-start'
+ break
+ case 'center':
+ _actionPosition = 'center'
+ break
+ case 'bottom':
+ _actionPosition = 'flex-end'
+ break
+ default:
+ _actionPosition = 'flex-end'
+ }
+ return _actionPosition
+}
+const List = ({
+ data,
+ bordered,
+ type,
+ layout,
+ hoverable,
+ emptyText = '暂无数据',
+ pagination = {},
+ action,
+ actionPosition = '',
+ renderItem,
+ split = true,
+ ...others
+}) => {
+ const [datas, setData] = useState(data)
+ const paginationProps = pagination
+ useEffect(() => {
+ setData(data)
+ }, [data])
+ const renderListItem = (item, index) => {
+ const { avatar } = item || {}
+
+ return (
+ {
+ static open = OpenFun
+ static close = CloseFun
+}
+export default Loading
diff --git a/components/loading/style/index.scss b/components/loading/style/index.scss
index 1c287b0bb..a767deeea 100755
--- a/components/loading/style/index.scss
+++ b/components/loading/style/index.scss
@@ -126,7 +126,6 @@
background: #4284f5;
transform: translateX(100%);
animation: animDotL 1.5s linear infinite;
- // display: none;
}
}
}
diff --git a/components/locales/en-US.js b/components/locales/en-US.js
index ca765265b..8a17a0f28 100644
--- a/components/locales/en-US.js
+++ b/components/locales/en-US.js
@@ -5,54 +5,25 @@ export default {
datePicker: {
ok: 'OK',
to: 'to',
- placeholder: 'Select Date',
- placeholderTimeperiod: 'Select Date Time',
+ placeholder: ['Select Date'],
+ placeholderTimeperiod: ['Select Time'],
dateChoose: 'Select Date',
timeChoose: 'Select Time',
undefinedType: 'undefined type',
lastWeek: 'Nearly week',
lastMonth: 'Nearly month',
lastThreeMonth: 'Nearly three months',
- lastSixMonth: 'Nearly six months',
lastYear: 'Nearly year',
- month: [
- 'January',
- 'February',
- 'March',
- 'April',
- 'May',
- 'June',
- 'July',
- 'August',
- 'September',
- 'October',
- 'November',
- 'December'
- ],
- monthShort: [
- 'Jan',
- 'Feb',
- 'Mar',
- 'Apr',
- 'May',
- 'Jun',
- 'Jul',
- 'Aug',
- 'Sep',
- 'Oct',
- 'Nov',
- 'Dec'
- ],
+ month: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
+ monthShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
week: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
placeholders: {
- date: 'Select Date',
- month: 'Select Month',
- year: 'Select Year',
- time: 'Select Time',
+ date: ['Select Date'],
+ month: ['Select Month'],
+ year: ['Select Year'],
+ time: ['Select Time'],
daterange: ['Select Start Date', 'Select End Date'],
- yearrange: ['Select Start Year', 'Select End Year'],
- monthrange: ['Select Start Month', 'Select End Month'],
- week: 'Select Week',
+ week: ['Select Week'],
weekrange: ['Select Start Week', 'Select End Week'],
timeperiod: ['Select Start Date Time', 'Select Start End Time']
},
@@ -80,7 +51,17 @@ export default {
placeholder: 'Please select',
emptyContent: 'Not found',
searchPlaceholder: 'Please search',
- checkAll: 'Check all'
+ checkAll: 'Check all',
+ justSelected: 'Just Selected'
+ },
+ selectTree: {
+ back: 'Back',
+ search: 'search'
+ },
+ search: {
+ searchEmptyResult: 'No serach results',
+ searchEmptyRecord: 'No serach record',
+ searchRecord: 'Serach record'
},
transfer: {
checkAll: 'Check all',
@@ -130,5 +111,8 @@ export default {
searchEmptyResult: 'No serach results',
modalTitle: 'Warning',
delTips: 'Deleting a node will delete all child nodes, are you sure to delete this node?'
+ },
+ watermark: {
+ content: 'Please do not gaiden'
}
}
diff --git a/components/locales/zh-CN.js b/components/locales/zh-CN.js
index f3120c148..a3e7c2fad 100644
--- a/components/locales/zh-CN.js
+++ b/components/locales/zh-CN.js
@@ -5,30 +5,28 @@ export default {
datePicker: {
ok: '确认',
to: '至',
- placeholder: '请选择日期',
- placeholderTimeperiod: '请选择日期时间',
+ placeholder: ['请选择日期'],
+ placeholderTimeperiod: ['请选择时间'],
dateChoose: '日期选择',
timeChoose: '时间选择',
undefinedType: '类型未定义',
lastWeek: '近一周',
lastMonth: '近一月',
lastThreeMonth: '近三月',
- lastSixMonth: '近半年',
lastYear: '近一年',
month: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
monthShort: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
week: ['日', '一', '二', '三', '四', '五', '六'],
placeholders: {
- date: '请选择日期',
- month: '请选择月',
- year: '请选择年',
- time: '请选择时间',
+ date: ['请选择日期'],
+ month: ['请选择月'],
+ year: ['请选择年'],
+ time: ['请选择时间'],
daterange: ['开始日期', '结束日期'],
- yearrange: ['开始年', '结束年'],
- monthrange: ['开始月', '结束月'],
- week: '请选择周',
+ week: ['请选择周'],
weekrange: ['开始周', '结束周'],
- timeperiod: ['开始日期时间', '结束日期时间']
+ timeperiod: ['开始时间', '结束时间'],
+ timerange: ['请选择开始时间', '请选择结束时间']
},
year: '年',
timePeriod: '时间段',
@@ -49,13 +47,24 @@ export default {
},
cascader: {
placeholder: '请选择',
- noFoundTip: '无匹配数据'
+ noFoundTip: '无匹配数据',
+ emptyContent: '暂无数据'
},
select: {
placeholder: '请选择',
emptyContent: '无匹配数据',
searchPlaceholder: '搜索',
- checkAll: '全选'
+ checkAll: '全选',
+ justSelected: '仅看已选'
+ },
+ selectTree: {
+ back: '返回',
+ search: '搜索'
+ },
+ search: {
+ searchEmptyResult: '未找到搜索结果',
+ searchEmptyRecord: '无搜索记录',
+ searchRecord: '搜索历史'
},
transfer: {
checkAll: '全选',
@@ -105,5 +114,8 @@ export default {
searchEmptyResult: '未找到搜索结果',
modalTitle: '提示',
delTips: '删除节点将删除所有子节点，确定删除吗？'
+ },
+ watermark: {
+ content: '请勿外传'
}
}
diff --git a/components/menu/Item.js b/components/menu/Item.js
index 9bd3db840..795598819 100644
--- a/components/menu/Item.js
+++ b/components/menu/Item.js
@@ -4,7 +4,7 @@ import classNames from 'classnames'
import Title from './Title'
class Item extends Component {
- render () {
+ render() {
const { children, disabled, onClick, level, placement, activeIndex, id, icon, index, data, mini } = this.props
const isActive = activeIndex === index
const cls = classNames('hi-menu-item', 'hi-menu-item__title', 'hi-menu__title', `hi-menu--${level}`, {
diff --git a/components/menu/Menu.js b/components/menu/Menu.js
index 24e6ea824..517051381 100644
--- a/components/menu/Menu.js
+++ b/components/menu/Menu.js
@@ -7,7 +7,7 @@ import Item from './Item'
import SubMenu from './SubMenu'
import './style/index'
class Menu extends Component {
- constructor (props) {
+ constructor(props) {
super(props)
const { activeId, collapsed } = this.props
const activeIndex = this.getActiveIndex(activeId)
@@ -26,7 +26,7 @@ class Menu extends Component {
this.clickInsideFlag = false // click在menu标识
}
- componentWillReceiveProps (nextProps) {
+ componentWillReceiveProps(nextProps) {
const { activeId, data, collapsed } = nextProps
if (activeId !== this.props.activeId || !_.isEqual(data, this.props.data)) {
const activeIndex = this.getActiveIndex(activeId, data)
@@ -48,15 +48,15 @@ class Menu extends Component {
}
}
- componentDidMount () {
+ componentDidMount() {
window.addEventListener('click', this.clickOutsideHandel)
}
- componentWillUnmount () {
+ componentWillUnmount() {
window.removeEventListener('click', this.clickOutsideHandel)
}
- clickOutside () {
+ clickOutside() {
if (!this.clickInsideFlag && !this.isNoMiniVertaicalMenu()) {
this.setState({
expandIndex: []
@@ -66,11 +66,11 @@ class Menu extends Component {
this.clickInsideFlag = false
}
- clickInside () {
+ clickInside() {
this.clickInsideFlag = true
}
- getExpandIndex (clickedIndex) {
+ getExpandIndex(clickedIndex) {
if (!clickedIndex) {
return []
}
@@ -79,7 +79,7 @@ class Menu extends Component {
let _clickedIndex = clickedIndex
let subInExpandIndex = false
- let _expandIndex = expandIndex.filter((item) => {
+ const _expandIndex = expandIndex.filter((item) => {
// 点击父菜单时，需要把已展开的子菜单过滤掉，因为父菜单关闭时所有子菜单也要关闭
const flag = item.startsWith(_clickedIndex)
if (flag) {
@@ -106,15 +106,15 @@ class Menu extends Component {
}
}
- isNoMiniVertaicalMenu (collapsed = this.state.collapsed) {
+ isNoMiniVertaicalMenu(collapsed = this.state.collapsed) {
// 垂直非mini菜单
return this.props.placement === 'vertical' && !collapsed
}
- getActiveMenus (menus, activeId, activeMenus = []) {
+ getActiveMenus(menus, activeId, activeMenus = []) {
let result
- for (let index in menus) {
- let _activeMenus = [...activeMenus]
+ for (const index in menus) {
+ const _activeMenus = [...activeMenus]
if (menus[index].id === activeId) {
_activeMenus.push(index)
result = _activeMenus
@@ -131,7 +131,7 @@ class Menu extends Component {
}
}
- getActiveIndex (activeId, menu) {
+ getActiveIndex(activeId, menu) {
// 获取激活item对应的索引，以'-'拼接成字符串
const { data } = this.props
@@ -142,7 +142,7 @@ class Menu extends Component {
return (activeMenus && activeMenus.join('-')) || ''
}
- toggleMini () {
+ toggleMini() {
const collapsed = !this.state.collapsed
const expandIndex = collapsed ? [] : this.state.expandIndex
@@ -159,7 +159,7 @@ class Menu extends Component {
}, 0)
}
- onClick (indexs, id, data) {
+ onClick(indexs, id, data) {
const expandIndex = this.isNoMiniVertaicalMenu() ? this.state.expandIndex : this.getExpandIndex('') // 非mini垂直菜单选中时不需要收起子菜单
const oldId = this.state.activeId
@@ -175,7 +175,7 @@ class Menu extends Component {
)
}
- onClickSubMenu (index) {
+ onClickSubMenu(index) {
const expandIndex = this.getExpandIndex(index)
this.clickInside()
@@ -189,7 +189,7 @@ class Menu extends Component {
)
}
- renderItem (data, index, props = {}) {
+ renderItem(data, index, props = {}) {
// render menu item
const { activeIndex } = this.state
const mergeProps = Object.assign(
@@ -209,18 +209,18 @@ class Menu extends Component {
return
+ {label || label === '' ? (
+
+ ) : (
+
+ )}
+
+ )
+ }
+}
+
+FormItem.contextTypes = {
+ component: PropTypes.any
+}
+
+FormItem.propTypes = {
+ field: PropTypes.string,
+ rules: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+ required: PropTypes.bool,
+ label: PropTypes.string,
+ labelWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+ showColon: PropTypes.bool,
+ className: PropTypes.string,
+ style: PropTypes.object
+}
+
+FormItem.defaultProps = {
+ size: 'small'
+}
+
+export default depreactedPropsCompat([['field', 'prop']])(FormItem)
diff --git a/components/form/form-legacy/form-v2/__tests__/index.test.js b/components/form/form-legacy/form-v2/__tests__/index.test.js
new file mode 100644
index 000000000..99fec346e
--- /dev/null
+++ b/components/form/form-legacy/form-v2/__tests__/index.test.js
@@ -0,0 +1,491 @@
+import React from 'react'
+import { mount } from 'enzyme'
+import Form from '../index'
+import Input from '../../input'
+import _Form from '../Form'
+import FormItem from '../Item'
+import Grid from '../../grid'
+import Button from '../../button'
+import Radio from '../../radio'
+class Demo extends React.Component {
+ constructor(props) {
+ super(props)
+
+ this.form = React.createRef()
+
+ this.state = {
+ form: {
+ name: '',
+ region: '',
+ count: ''
+ },
+ checkedIndex: -1,
+ rules: {
+ name: [
+ {
+ required: true,
+ message: 请输入名称,
+ trigger: 'onBlur,onChange'
+ }
+ ],
+ region: [
+ {
+ required: true,
+ message: '请选择区域',
+ trigger: 'onChange'
+ }
+ ],
+ count: [
+ {
+ required: true,
+ message: '请输入数量',
+ trigger: 'onChange'
+ },
+ {
+ validator: (rule, value, cb) => {
+ const count = parseInt(value)
+ if(isNaN(count)) {
+ cb('请输入数字')
+ } else if(count <= 0) {
+ cb('必须是正数')
+ } else {
+ cb()
+ }
+ },
+ trigger: 'onChange'
+ }
+ ]
+ }
+ }
+ }
+
+ handleSubmit() {
+ this.form.current.validate(valid => {
+ if(valid) {
+ console.log(this.state.form)
+ alert('submit')
+ } else {
+ console.log('error')
+ return false
+ }
+ })
+ }
+
+ cancelSubmit() {
+ this.setState({
+ form: {
+ name: '',
+ region: '',
+ count: ''
+ }
+ })
+ this.form.current.resetValidates()
+ }
+
+ handleChange(key, e, value, index) {
+ this.setState({
+ form: Object.assign({}, this.state.form, {[key]: value})
+ })
+
+ if(index !== undefined) {
+ this.setState({
+ checkedIndex: index
+ })
+ }
+ }
+
+ render(){
+ const Row = Grid.Row
+ const Col = Grid.Col
+ const {form, checkedIndex} = this.state
+
+ return (
+
+ {Array.isArray(children) || !children
+ ? children
+ : React.cloneElement(children, {
+ onChange: (...args) => {
+ children.props.onChange && children.props.onChange(...args)
+ setTimeout(() => {
+ this.handleFieldChange()
+ })
+ },
+ onBlur: (...args) => {
+ children.props.onBlur && children.props.onBlur(...args)
+ setTimeout(() => {
+ this.handleFieldBlur()
+ })
+ }
+ })}
+
+ {error}
+
+
+
+ )
+ }
+}
+class Demo2 extends React.Component {
+ constructor(props) {
+ super(props)
+
+ this.form = React.createRef()
+
+ this.state = {
+ form: {
+ name: '',
+ region: '',
+ count: ''
+ },
+ checkedIndex: -1,
+ rules: {
+ name: [
+ {
+ required: true,
+ message: 请输入名称,
+ trigger: 'onBlur,onChange'
+ }
+ ],
+ region: [
+ {
+ required: true,
+ message: '请选择区域',
+ trigger: 'onChange'
+ }
+ ],
+ count: [
+ {
+ required: true,
+ message: '请输入数量',
+ trigger: 'onChange'
+ },
+ {
+ validator: (rule, value, cb) => {
+ const count = parseInt(value)
+ if(isNaN(count)) {
+ cb('请输入数字')
+ } else if(count <= 0) {
+ cb('必须是正数')
+ } else {
+ cb()
+ }
+ },
+ trigger: 'onChange'
+ }
+ ]
+ }
+ }
+ }
+
+ handleSubmit() {
+ this.form.current.validate(valid => {
+ if(valid) {
+ console.log(this.state.form)
+ alert('submit')
+ } else {
+ console.log('error')
+ return false
+ }
+ })
+ }
+
+
+ render(){
+ const Row = Grid.Row
+ const Col = Grid.Col
+ const {form} = this.state
+
+ return (
+
+
+
+ )
+ }
+}
+class Demo3 extends React.Component {
+ constructor(props) {
+ super(props)
+
+ this.form = React.createRef()
+
+ this.state = {
+ form: {
+ name: '',
+ region: '',
+ count: ''
+ },
+ checkedIndex: -1,
+ }
+ }
+
+ handleSubmit() {
+ this.form.current.validate(valid => {
+ if(valid) {
+ console.log(this.state.form)
+ alert('submit')
+ } else {
+ console.log('error')
+ return false
+ }
+ })
+ }
+
+ render(){
+ const Row = Grid.Row
+ const Col = Grid.Col
+ const {form} = this.state
+ return (
+
+
+
+ )
+ }
+}
+describe('Form', () => {
+ it('should have the correct placement', () => {
+ const wrapper = mount(
+
+ )
+ expect(wrapper.find('.hi-form--line')).toHaveLength(0)
+ wrapper.setProps({ placement: 'vertical' })
+ expect(wrapper.find('.hi-form--line')).toHaveLength(0)
+ wrapper.setProps({ placement: 'horizontal' })
+ expect(wrapper.find('.hi-form--inline')).toHaveLength(1)
+ wrapper.unmount()
+ })
+
+ it('should align the label by labelPlacement', () => {
+ ;['left', 'right', 'top'].forEach(labelPlacement => {
+ const wrapper = mount(
+
+ )
+ expect(wrapper.find(`.hi-form--label--${labelPlacement}`)).toHaveLength(1)
+ const wrapperLegacy = mount(
+
+ )
+ // expect(wrapperLegacy.find(`.hi-form--label--${labelPlacement}`)).toHaveLength(1)
+ wrapper.unmount()
+ wrapperLegacy.unmount()
+ })
+ })
+
+ it('should have the label width', () => {
+ const wrapper = mount(
+
+ )
+ expect(
+ wrapper.find('label.hi-form-item__label').map(label => label.prop('style').width)
+ ).toEqual([50, 50])
+ wrapper.unmount()
+ })
+
+ it('should show colon', () => {
+ const wrapper = mount(
+
+ )
+ expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
+ '账号：',
+ '密码：'
+ ])
+ wrapper.setProps({ showColon: false })
+ expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
+ '账号',
+ '密码'
+ ])
+ wrapper.unmount()
+ })
+
+ it('should field has colon when field showColon is true and form showColon is false', () => {
+ const wrapper = mount(
+
+ )
+ expect(wrapper.find('label.hi-form-item__label').map(label => label.text())).toEqual([
+ '账号：',
+ '密码'
+ ])
+ wrapper.unmount()
+ })
+
+ it('should validate require field', () => {
+ jest.useFakeTimers()
+ const localeDatas = {
+ form: {
+ colon: '：'
+ }
+ }
+ const blurCb = jest.fn()
+ const wrapper = mount(
+ <_Form
+ rules={{
+ name: {
+ required: true,
+ message: '请输入名称',
+ trigger: 'onChange'
+ }
+ }}
+ localeDatas={localeDatas}
+ model={{
+ name: ''
+ }}
+ >
+ -
+ {extra.map((item, index) => {
+ return (
+
+ {(title || titleTag) && (
+
+ )
+}
+export default Item
diff --git a/components/list/index.d.ts b/components/list/index.d.ts
new file mode 100644
index 000000000..a0091d43d
--- /dev/null
+++ b/components/list/index.d.ts
@@ -0,0 +1,23 @@
+type DataItem = {
+ title: string | JSX.Element
+ titleTag?: string | JSX.Element
+ titleTagType?: 'primary' | 'success' |'warning' | 'danger'
+ description?: string | JSX.Element
+ extra?: string | string[]
+ avatar?: string
+}
+interface Props {
+ type?: 'default' | 'card'
+ data: DataItem[]
+ renderItem?: (item: DataItem) => JSX.Element
+ action?: (item: DataItem) => JSX.Element
+ actionPosition?: 'top' | 'center' |'bottom'
+ split?: boolean
+ pagination?: boolean | PaginationProps
+ bordered?: boolean
+ hoverable?: boolean
+ layout?: 'vertical' | 'horizontal'
+ emptyText?: string | JSX.Element
+}
+declare const List: React.ComponentType
+ {title && (
+
+ )}
+ {description && (
+ + {title} +
+ )} + {titleTag && ( + + {titleTag} + + )} +
+ {description}
+
+ )}
+ {extra && (
+
+ {isArray(extra) ?
+ )}
+
+
+ )
+}
+List.Item = Item
+export { IconText }
+export default List
diff --git a/components/list/style/index.js b/components/list/style/index.js
new file mode 100644
index 000000000..63810a681
--- /dev/null
+++ b/components/list/style/index.js
@@ -0,0 +1 @@
+import './index.scss'
diff --git a/components/list/style/index.scss b/components/list/style/index.scss
new file mode 100644
index 000000000..f1dce4383
--- /dev/null
+++ b/components/list/style/index.scss
@@ -0,0 +1,159 @@
+@import '../../core-css/index.scss';
+
+$list: 'hi-list' !default;
+
+$color-map: (
+ 'primary': use-color('primary'),
+ 'warning': get-color($palette-secondary, 'warning'),
+ 'success': get-color($palette-secondary, 'success'),
+ 'danger': get-color($palette-secondary, 'danger')
+) !default;
+
+.#{$list} {
+ &-items {
+ margin: 0;
+ padding: 0;
+
+ &__border {
+ border: 1px solid use-color('gray-30');
+ border-bottom: none;
+
+ .hi-list-item {
+ padding-left: 12px;
+ }
+ }
+ }
+
+ &-item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 20px 24px 16px 0;
+
+ &__row {
+ display: flex;
+ align-items: flex-start;
+ }
+
+ &-title__content {
+ display: flex;
+ align-items: center;
+ }
+
+ &__title {
+ padding: 0;
+ margin: 0;
+ color: use-color('black');
+ font-size: $font-size-large;
+ line-height: 24px;
+ font-weight: $font-weight-normal;
+ }
+
+ &__titleTag {
+ height: 18px;
+ font-size: $font-size-small;
+ font-weight: $font-weight-normal;
+ line-height: 18px;
+ margin-left: 8px;
+ padding: 0 6px;
+ border-radius: 9px;
+ color: use-color('primary');
+ border: 1px solid use-color('primary');
+ }
+
+ &__desc {
+ color: use-color('black');
+ font-size: $font-size-small;
+ line-height: 20px;
+ }
+
+ &__extra {
+ color: use-color('gray-70');
+ font-size: $font-size-small;
+ line-height: 20px;
+ }
+
+ &__avatar {
+ margin-right: 14px;
+
+ img {
+ width: 72px;
+ height: 72px;
+ display: inline-block;
+ }
+ }
+
+ &__action {
+ color: use-color('black');
+ font-size: $font-size-small;
+ line-height: 20px;
+ text-align: center;
+ cursor: pointer;
+ }
+
+ &__split {
+ border-bottom: 1px solid use-color('gray-30');
+ }
+ }
+
+ &-item__card {
+ border: 1px solid use-color('gray-30');
+ margin-top: 12px;
+ padding: 8px 16px 8px 12px;
+ }
+
+ &-item__colume {
+ flex-direction: column;
+ align-items: flex-start;
+ }
+
+ &-item--empty {
+ color: use-color('gray-70');
+ text-align: center;
+ line-height: 88px;
+ list-style: none;
+ }
+
+ &-item__hoverable:hover {
+ box-shadow: 2px 2px 5px 2px rgba(0, 0, 0, 0.08);
+ }
+
+ &-extra-items {
+ display: flex;
+ align-items: center;
+ margin: 0;
+ padding: 0;
+
+ li {
+ list-style: none;
+ }
+ }
+
+ &-extra-item {
+ line-height: 20px;
+
+ &::after {
+ display: inline-block;
+ content: '';
+ width: 1px;
+ height: 10px;
+ margin: 0 12px;
+ background-color: use-color('gray-30');
+ }
+
+ &:last-child {
+ &::after {
+ display: inline-block;
+ content: '';
+ width: 0;
+ }
+ }
+ }
+
+ @each $key, $value in $color-map {
+ &-titleTag__#{$key} {
+ color: $value;
+ border: 1px solid $value;
+ }
+ }
+}
diff --git a/components/loading/index.d.ts b/components/loading/index.d.ts
new file mode 100644
index 000000000..c6a993c3e
--- /dev/null
+++ b/components/loading/index.d.ts
@@ -0,0 +1,21 @@
+interface Props {
+ size?: 'large' | 'default' | 'small'
+ content?: string | JSX.Element
+ visible?: boolean
+ full?: boolean
+}
+
+type Options = {
+ content?: string | JSX.Element
+ key: string | number
+ duration?: number
+ size?: 'large' | 'default' | 'small'
+}
+const OpenFun: (target: HTMLElement, options: Options) => void
+const CloseFun: (key: string | number) => void
+
+declare class Loading extends React.Component-
+ {datas && datas.length ? (
+ datas.map((item, index) => {
+ return renderListItem(item, index)
+ })
+ ) : (
+
+
+ )}
+