diff --git a/src/card/demo/Card.stories.tsx b/src/card/demo/Card.stories.tsx index 7c8def4359..e68be12547 100644 --- a/src/card/demo/Card.stories.tsx +++ b/src/card/demo/Card.stories.tsx @@ -48,64 +48,180 @@ Default.args = {
这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。
- + + ), +}; +export const BoxShadow = () => ( + + + + + } + /> +
+ 这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。 +
+ - - ), -} -export const BoxShadow = () => - - - - } - /> -
- 这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。这里是卡片的描述，可以有很多很多字。 + }} + /> + +); +export const WithoutContent = () => ( + + + L + + } + title="卡片标题" + description="卡片副标题" + action={ + + + + } + /> + +); +export const Disabled = () => ( + + + L + + } + title="卡片标题" + description="卡片副标题" + action={ + alert('action click')}> + + + } + /> + +); +export const GridCard = () => ( +
+ + + + z} + title="卡片标题" + description="卡片副标题" + action={ + + + + } + /> + +
+ 张三 +
+ + + + + + + + } + /> + + + + + + z} + title="卡片标题" + description="卡片副标题" + action={ + + + + } + /> + + + + - - -export const WithoutContent = () => - L} - title="卡片标题" - description="卡片副标题" - action={ - - - - } - /> - -export const Disabled = () => - L} - title="卡片标题" - description="卡片副标题" - action={ - alert('action click')}> - - - } - /> - -export const GridCard = () =>
- -
- +); +export const FullWidthContent = () => ( + + + L + + } + title="卡片标题" + description="卡片副标题" + action={ + + + + } + /> + + +); + +export const Clickable = () => { + const [clickable, setClickable] = useState(true); + return ( +
+ setClickable(e.target.checked)} + checkedChildren={可点击} + uncheckedChildren={不可点击} + /> + + z} title="卡片标题" @@ -117,255 +233,216 @@ export const GridCard = () =>
-
+
张三
- -
- - - - - } - /> -
- - - - - - z} - title="卡片标题" - description="卡片副标题" - action={ - - - - } - /> - - - - - -export const FullWidthContent = () => - L} - title="卡片标题" - description="卡片副标题" - action={ - - - - } - /> - - - + + ); +}; -export const Clickable = () => { - const [clickable, setClickable] = useState(true) - return
- setClickable(e.target.checked)} - checkedChildren={可点击} - uncheckedChildren={不可点击} +export const ComplexCard = () => { + const memberTotal = 44; + const dataSource = useMemo( + () => + Array.from({ length: memberTotal }).map((_, index) => ({ + id: `${index + 1 * 1000}`, + age: index + 1, + name: `Name ${index + 1}`, + address: `北京市朝阳公园`, + })), + [] + ); + const members = () => ( +
- - + ); + return ( + z} - title="卡片标题" - description="卡片副标题" + image={ + + L + + } + title={ + + 企业成员({memberTotal}) + + } + description="可查看企业管理相关权限，无法访问客户数据平台，推荐给各业务人员，或无需做数据管理的同事设置此角色。" action={ - - - + <> + + + + 编辑 + 删除 + + } + > + + + + + } /> - -
- 张三 -
+ + + {members()} + + +
+ + - -} - -export const ComplexCard = () => { - const memberTotal = 44; - const dataSource = useMemo(() => Array.from({ length: memberTotal }).map( - (_, index) => - ({ - id: `${index + 1 * 1000}`, - age: index + 1, - name: `Name ${index + 1}`, - address: `北京市朝阳公园`, - }) - ), []); - const members = () =>
- return - L} - title={ - - 企业成员({memberTotal}) - - } - description="可查看企业管理相关权限，无法访问客户数据平台，推荐给各业务人员，或无需做数据管理的同事设置此角色。" - action={ - <> - - - 编辑删除}> - - - - } - /> - - - {members()} - - -
- - - -} + ); +}; export const ComplexCardPanel = () => { const memberTotal = 44; - const dataSource = useMemo(() => Array.from({ length: memberTotal }).map( - (_, index) => - ({ - id: `${index + 1 * 1000}`, - age: 21 + index, - name: `Name ${index + 1}`, - address: `北京市朝阳公园`, - }) - ), []); + const dataSource = useMemo( + () => + Array.from({ length: memberTotal }).map((_, index) => ({ + id: `${index + 1 * 1000}`, + age: 21 + index, + name: `Name ${index + 1}`, + address: `北京市朝阳公园`, + })), + [] + ); const [selectedRowKeys, setSelectedRowKeys] = useState([]); - const renderToolbar = () =>
-
- -
-
{selectedRowKeys?.length > 0 && - (
- 已经选择 {selectedRowKeys?.length} 项 - setSelectedRowKeys([])}> - - - - -
)} - {selectedRowKeys?.length === 0 && - (<> - )} + const renderToolbar = () => ( +
+
+ +
+
+ {selectedRowKeys?.length > 0 && ( +
+ 已选择 {selectedRowKeys?.length} 项 + setSelectedRowKeys([])}> + + + + +
+ )} + {selectedRowKeys?.length === 0 && ( + <> + + + + )} +
-
- return - - 全部成员(233) - - } - /> - {renderToolbar()} -
-
+ + 全部成员 (233) + + } + /> + {renderToolbar()} +
+
{ setSelectedRowKeys(selectedKeys as string[]); }, columnWidth: 60, - } - } - dataSource={dataSource} - rowKey="id" /> - - -} - + }} + dataSource={dataSource} + rowKey="id" + /> + + + ); +}; diff --git a/src/date-range-picker/style/index.less b/src/date-range-picker/style/index.less index 8ced4040ef..aed650c23a 100644 --- a/src/date-range-picker/style/index.less +++ b/src/date-range-picker/style/index.less @@ -1,6 +1,4 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; @date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker'; diff --git a/src/past-time-picker/style/index.less b/src/past-time-picker/style/index.less index 1abd94889f..0e86f9051f 100644 --- a/src/past-time-picker/style/index.less +++ b/src/past-time-picker/style/index.less @@ -1,6 +1,4 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; @past-time-picker-prefix-cls: ~'@{component-prefix}-past-time-picker'; diff --git a/src/static-date-picker/style/index.less b/src/static-date-picker/style/index.less index ea60e108c9..b231aa4619 100644 --- a/src/static-date-picker/style/index.less +++ b/src/static-date-picker/style/index.less @@ -1,19 +1,14 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; -@new-date-picker-prefix-cls: ~'@{component-prefix}-picker'; -@icon-prefix-cls: ~'@{component-prefix}-icon'; +@static-date-picker-prefix-cls: ~'@{component-prefix}-picker'; -.@{new-date-picker-prefix-cls} { +.@{static-date-picker-prefix-cls} { &-decade-btn, &-year-btn, &-month-btn { height: 24px; - .font(@weight: 500); - color: @gray-5; - line-height: 22px; + .text-h4(); background: @gray-0; border: none; border-radius: 4px; @@ -22,12 +17,12 @@ &-decade-btn:hover, &-year-btn:hover, &-month-btn:hover { - background: @palette-gray-2; + background: @gray-1; } &-decade-btn:active, &-year-btn:active, &-month-btn:active { - background: @palette-gray-3; + background: @gray-2; } &-panel { @@ -36,7 +31,7 @@ background: @gray-0; border-radius: 4px; outline: 0; - filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1)); + .elevation(1); } &-header { @@ -45,7 +40,7 @@ box-sizing: content-box; height: 24px; padding: 12px 8px 11px; - border-bottom: 1px solid @palette-gray-3; + border-bottom: 1px solid @gray-2; border-radius: 4px 4px 0 0; &-super-prev-btn, @@ -61,7 +56,7 @@ border-radius: 4px; cursor: pointer; - .@{icon-prefix-cls} { + .@{component-prefix}-icon { color: @gray-5; } } @@ -75,21 +70,20 @@ &-super-next-btn:hover, &-prev-btn:hover, &-next-btn:hover { - background: @palette-gray-2; + background: @gray-1; } &-super-prev-btn:active, &-super-next-btn:active, &-prev-btn:active, &-next-btn:active { - background: @palette-gray-3; + background: @gray-2; } &-view { flex-grow: 1; color: @gray-5; - line-height: 24px; text-align: center; - .font(@weight: 500); + .text-h4(); } } @@ -114,11 +108,9 @@ } tr > th { - .font(); + .text-body1(); margin: 5px; color: @gray-5; - - line-height: 22px; text-align: center; } } @@ -131,7 +123,7 @@ cursor: pointer; } - &:not(&-disabled)::before { + &::before { position: absolute; right: 0; left: 0; @@ -146,14 +138,15 @@ display: inline-block; min-width: 24px; height: 30px; + font-weight: 400; + font-size: 14px; line-height: 30px; text-align: center; border-radius: 4px; - .font(@weight: normal); } &-in-view:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover):not(&-range-hover-start):not(&-range-hover-end) &-inner:hover { - background-color: @palette-gray-2; + background-color: @gray-1; } &-in-view { @@ -175,8 +168,7 @@ bottom: 0; left: 0; z-index: 1; - border: 1px solid @blue-3; - border-radius: 4px; + .border(2, @blue-3); content: ''; } @@ -192,7 +184,7 @@ cursor: not-allowed; &::before { - background: @palette-gray-1; + background: @gray-1; } } } diff --git a/src/static-date-range-picker/style/index.less b/src/static-date-range-picker/style/index.less index f684cb4314..fcfc00c484 100644 --- a/src/static-date-range-picker/style/index.less +++ b/src/static-date-range-picker/style/index.less @@ -1,9 +1,6 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; - -@date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker'; -@static-date-range-picker-prefix-cls: ~'@{component-prefix}-picker'; +@import (reference) '../../stylesheet/variables/index.less'; +@import (reference) '../../static-date-picker/style/index.less'; +@import (reference) '../../date-range-picker/style/index.less'; .@{date-range-picker-prefix-cls} { display: flex; @@ -16,13 +13,13 @@ } &__left { - .@{static-date-range-picker-prefix-cls}-body { - border-right: 1px solid @palette-gray-3; + .@{static-date-picker-prefix-cls}-body { + border-right: 1px solid @gray-2; } } } -.@{static-date-range-picker-prefix-cls} { +.@{static-date-picker-prefix-cls} { &-cell { &-in-view&-range-start, &-in-view&-range-end { @@ -30,12 +27,12 @@ } &-in-view&-range-start &-inner, &-in-view&-range-end &-inner { - background: @palette-blue-4; + background: @blue-3; } &-in-view&-range-start:not(&-range-start-single)::before, &-in-view&-range-end:not(&-range-end-single)::before, &-in-view&-in-range::before { - background-color: @palette-blue-1; + background-color: @blue-1; } &-in-view&-range-start::before { left: 50%; @@ -57,8 +54,8 @@ z-index: 0; box-sizing: content-box; height: 22px; - border-top: 1px dashed @palette-blue-4; - border-bottom: 1px dashed @palette-blue-4; + border-top: 1px dashed @blue-3; + border-bottom: 1px dashed @blue-3; content: ''; } } @@ -70,7 +67,7 @@ &-in-view&-range-hover-edge-start:not(&-range-hover-edge-start-near-range)::after, &-in-view&-range-hover-start::after { left: 6px; - border-left: 1px dashed @palette-blue-4; + border-left: 1px dashed @blue-3; border-top-left-radius: 4px; border-bottom-left-radius: 4px; } @@ -82,7 +79,7 @@ &-in-view&-range-hover-edge-end:not(&-range-hover-edge-end-near-range)::after, &-in-view&-range-hover-end::after { right: 6px; - border-right: 1px dashed @palette-blue-4; + border-right: 1px dashed @blue-3; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } diff --git a/src/static-past-time-picker/style/RangePanel.less b/src/static-past-time-picker/style/RangePanel.less index b33228801a..e661ecf401 100644 --- a/src/static-past-time-picker/style/RangePanel.less +++ b/src/static-past-time-picker/style/RangePanel.less @@ -1,10 +1,8 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; +@import (reference) '../../date-range-picker/style/index.less'; @range-panel-prefix-cls: ~'@{component-prefix}-range-panel'; @date-picker-prefix-cls: ~'@{component-prefix}-picker-panel'; -@date-range-picker-prefix-cls: ~'@{component-prefix}-date-range-picker'; @range-input-trigger-prefix-cls: ~'@{component-prefix}-range-input-trigger'; .@{range-panel-prefix-cls} { @@ -15,11 +13,8 @@ border: none; &__text { - .font(); - - /* $palette/black/6 */ - color: #313e75; - + .text-body2(); + color: @gray-5; line-height: 30px; } @@ -37,9 +32,7 @@ &__divider { height: 0; margin: 0; - - /* Border/Border-1 */ - border-bottom: 1px solid #e7eaf9; + border-bottom: 1px solid @gray-2; } &__body { @@ -47,8 +40,7 @@ & > .@{date-picker-prefix-cls}, .@{date-range-picker-prefix-cls} { - border: 1px solid #ebedf5; - border-radius: 4px; + .border(2, @gray-2); box-shadow: none; filter: none; } diff --git a/src/static-time-picker/StaticTimePicker.tsx b/src/static-time-picker/StaticTimePicker.tsx index b08b74d93f..a92b83a8c1 100644 --- a/src/static-time-picker/StaticTimePicker.tsx +++ b/src/static-time-picker/StaticTimePicker.tsx @@ -8,7 +8,7 @@ import defaultLocale from './locales/zh-CN'; import { StaticTimePickerProps } from './interfaces'; export function StaticTimePicker({ className, showSecond = false, renderFooter, ...restProps }: StaticTimePickerProps) { - const prefixCls = usePrefixCls('new-time-picker'); + const prefixCls = usePrefixCls('time-picker'); const locale = useLocale('StaticTimePicker') || defaultLocale; return ( diff --git a/src/static-time-picker/style/index.less b/src/static-time-picker/style/index.less index 1f119ddc32..c78a90bd6a 100644 --- a/src/static-time-picker/style/index.less +++ b/src/static-time-picker/style/index.less @@ -1,10 +1,8 @@ -@import '../../stylesheet/index.less'; -@import '../../stylesheet/mixin/index.less'; -@import '../../stylesheet/variables/index.less'; +@import (reference) '../../stylesheet/variables/index.less'; -@new-time-picker-prefix-cls: ~'@{component-prefix}-new-time-picker'; +@static-time-picker-prefix-cls: ~'@{component-prefix}-time-picker'; -.@{new-time-picker-prefix-cls} { +.@{static-time-picker-prefix-cls} { &-panel { display: flex; flex-direction: column; @@ -12,12 +10,12 @@ height: fit-content; padding-top: 4px; background-color: @gray-0; - filter: drop-shadow(0 8px 24px rgba(36, 46, 89, 0.1)); + .elevation(1); } &--three-columns { - .@{new-time-picker-prefix-cls}-time-panel-column { - padding-right: 10px; - padding-left: 10px; + .@{static-time-picker-prefix-cls}-time-panel-column { + padding-right: 8px; + padding-left: 8px; } } @@ -29,14 +27,14 @@ &-time-panel { &-column { - width: 40px; + box-sizing: border-box; + width: 80px; height: 240px; margin: 0; - padding: 8px 20px; + padding: 8px; overflow: hidden scroll; list-style-type: none; - border-right: 1px solid @palette-gray-3; - + border-right: 1px solid @gray-2; .scrollbar(); } &-column:last-child { @@ -47,22 +45,20 @@ margin-top: 4px; padding: 4px 12px; color: @gray-5; - .font(); - line-height: 22px; + .text-body1(); list-style-type: none; background-color: @gray-0; border-radius: 4px; cursor: pointer; &:hover { - background-color: @palette-gray-3; + background-color: @gray-1; } &-selected, &:active { color: @blue-3; - font-weight: 500; - background-color: @palette-gray-1; + background-color: @gray-1; } &-inner { @@ -72,7 +68,7 @@ } &-footer { - border-top: 1px solid @palette-gray-3; + border-top: 1px solid @gray-2; &-extra { display: flex; diff --git a/src/time-picker/TimePicker.tsx b/src/time-picker/TimePicker.tsx index 513fc56bfc..2fcbc4c9a8 100644 --- a/src/time-picker/TimePicker.tsx +++ b/src/time-picker/TimePicker.tsx @@ -115,7 +115,7 @@ export const TimePicker: React.FC = (props: TimePickerProps) =>