From e8ac750d8b633512dc9d0c6420276eb3e161619f Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 15:18:38 +0800 Subject: [PATCH 1/9] update --- components/card/Card.tsx | 20 +- components/card/Grid.tsx | 7 +- components/card/Meta.tsx | 8 +- components/card/style/index.ts | 335 +++++++++++++++++++++++ components/card/style/index.tsx | 12 +- components/style.ts | 4 +- components/theme/interface/components.ts | 7 +- package.json | 1 + 8 files changed, 371 insertions(+), 23 deletions(-) create mode 100644 components/card/style/index.ts diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 41f4fd3857..2fc3a4d0ed 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -9,6 +9,7 @@ import type { SizeType } from '../config-provider'; import isPlainObject from 'lodash-es/isPlainObject'; import useConfigInject from '../config-provider/hooks/useConfigInject'; import devWarning from '../vc-util/devWarning'; +import useStyle from './style'; export interface CardTabListType { key: string; tab: any; @@ -51,10 +52,13 @@ export type CardProps = Partial>>; const Card = defineComponent({ compatConfig: { MODE: 3 }, name: 'ACard', + inheritAttrs: false, props: cardProps(), slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'], - setup(props, { slots }) { - const { prefixCls, direction, size } = useConfigInject('card', props); + setup(props, { slots, attrs }) { + const { prefixCls, direction, size } = useConfigInject('card', props); //注入 + // console.log('prefixCls', prefixCls); + const [wrapSSR, hashId] = useStyle(prefixCls); //安装style const getAction = (actions: VNodeTypes[]) => { const actionList = actions.map((action, index) => (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? ( @@ -97,8 +101,10 @@ const Card = defineComponent({ } = props; const children = flattenChildren(slots.default?.()); const pre = prefixCls.value; + // console.log('pre', pre); const classString = { [`${pre}`]: true, + [hashId.value]: true, [`${pre}-loading`]: loading, [`${pre}-bordered`]: bordered, [`${pre}-hoverable`]: !!hoverable, @@ -190,16 +196,18 @@ const Card = defineComponent({ const actionDom = actions && actions.length ? : null; - return ( -
+ return wrapSSR( +
{head} {coverDom} {children && children.length ? body : null} {actionDom} -
+
, ); }; }, }); - +{ + /*
*/ +} export default Card; diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index b6253c1bbd..c18bdecdb4 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,6 +1,7 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; export const cardGridProps = () => ({ prefixCls: String, @@ -10,18 +11,18 @@ export type CardGridProps = Partial { return { [`${prefixCls.value}-grid`]: true, [`${prefixCls.value}-grid-hoverable`]: props.hoverable, }; }); - return () => { - return
{slots.default?.()}
; - }; + return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 129fb635d5..aa5b7fa1b4 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -3,6 +3,7 @@ import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; import { getPropsSlot } from '../_util/props-util'; import useConfigInject from '../config-provider/hooks/useConfigInject'; +import useStyle from './style'; export const cardMetaProps = () => ({ prefixCls: String, @@ -18,6 +19,7 @@ export default defineComponent({ slots: ['title', 'description', 'avatar'], setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); + const [wrapSSR, hashId] = useStyle(prefixCls); return () => { const classString = { [`${prefixCls.value}-meta`]: true, @@ -40,11 +42,11 @@ export default defineComponent({ {descriptionDom}
) : null; - return ( -
+ return wrapSSR( +
{avatarDom} {MetaDetail} -
+
, ); }; }, diff --git a/components/card/style/index.ts b/components/card/style/index.ts new file mode 100644 index 0000000000..bc9d99feee --- /dev/null +++ b/components/card/style/index.ts @@ -0,0 +1,335 @@ +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent, clearFix } from '../../_style'; +// import type { GlobalToken } from '../../theme/interface'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // sizePaddingEdgeHorizontal: number; +} +interface CardToken extends FullToken<'Card'> { + cardHeadFontSize: string; + CardHeadPadding: string; + cardPaddingBase: string; + cardPaddingBaseSm: string; + cardHeadHeightSm: string; + cardHeadPaddingSm: string; + cardActionsLiMargin: string; + cardHeadTabsMarginBottom: string; + cardHeadHeight: string; + cardShadow: string; +} +// ============================== Shared ============================== +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + cardHeadFontSize, + CardHeadPadding, + cardPaddingBase, + cardPaddingBaseSm, + cardHeadHeightSm, + cardHeadPaddingSm, + cardActionsLiMargin, + cardHeadTabsMarginBottom, + cardHeadHeight, + componentCls, + } = token; + return { + [componentCls]: { + ...resetComponent(token), + position: `relative`, + background: `${token.colorBgBase}`, + borderRadius: `${token.borderRadiusXS}px`, + '&-bordered': { + border: `1px solid #f0f0f0`, + }, + '&-rtl': { + direction: 'rtl', + }, + [`${componentCls}-hoverable`]: { + cursor: 'pointer', + transition: ` box-shadow 0.3s, ${token.colorBorder} 0.3s`, + border: 'solid red 1px', + '&::hover': { + border: 'solid red 1px', + borderColor: `${token.colorBgBase}`, + boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), + 0 5px 12px 4px rgba(0, 0, 0, 0.36)`, + }, + }, + [`${componentCls}-head`]: { + minHeight: `${cardHeadHeight}`, + marginBottom: `-1px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + fontWeight: 500, + fontSize: `${token.cardHeadFontSize}px`, + background: `transparent`, + borderBottom: '1px solid #f0f0f0', + border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, + ...clearFix(), + // &-bordered { + // border: @border-width-base @border-style-base @border-color-split; + // } + '&-wrapper': { + display: 'flex', + alignItems: 'center', + }, + '&-title': { + display: 'inline-block', + flex: 1, + // padding: `${token.cardPaddingBase} 0`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { + left: 0, + marginTop: 0, + marginBottom: 0, + }, + }, + + [`${componentCls}-prefix-tabs-top`]: { + clear: 'both', + marginBottom: `${token.margin}`, + color: `${token.colorText}`, + // fontWeight: 'normal', + fontWeight: 400, + fontSize: `${token.fontSize}`, + '&-bar': { + // borderBottom:`${token.cardShadow}` + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + [`${componentCls}-extra`]: { + float: 'right', + // https://stackoverflow.com/a/22429853/3040605 + marginLeft: 'auto', + padding: `${cardHeadHeight} 0`, + color: `${token.colorText}`, + // fontWeight: `${token.}`, + fontWeight: 400, + fontSize: `${token.fontSize}`, + [`${componentCls}-prefix-rtl &`]: { + marginRight: 'auto', + marginLeft: 0, + }, + }, + [`${componentCls}-body`]: { + padding: `${cardPaddingBase}`, + ...clearFix(), + }, + [`${componentCls}-contain-grid:not(&-loading) &-body`]: { + margin: ' -1px 0 0 -1px', + padding: 0, + }, + [`${componentCls}-grid`]: { + float: 'left', + width: '33.33%', + padding: `${cardPaddingBase}`, + border: 0, + borderRadius: 0, + boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, + 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, + 0 1px 0 0 ${token.colorSplit} inset; + transition: all 0.3s`, + [`${componentCls}-cls-rtl &`]: { + float: 'right', + }, + + '&-hoverable': { + '&:hover': { + position: 'relative', + zIndex: 1, + boxShadow: `${token.boxShadow}`, + }, + }, + }, + + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { + minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, + paddingBottom: 0, + }, + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { + paddingBottom: 0, + }, + [` ${componentCls}-bordered > ${componentCls}-cover `]: { + marginTop: '-1px', + marginRight: '-1px', + marginLeft: '-1px', + }, + [`${componentCls}-cover`]: { + ' > *': { + display: 'block', + width: '100%', + }, + + img: { + borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + }, + }, + + ' &-actions': { + margin: 0, + padding: 0, + listStyle: 'none', + background: `${token.colorBgBase}`, + // @card-actions-background; + borderTop: `${token.BackTop}`, + // @border-width-base @border-style-base @border-color-split; + ...clearFix(), + + '& > li': { + float: 'left', + margin: `${cardActionsLiMargin}`, + color: `~@text-color-secondary`, + textAlign: 'center', + + [` ${componentCls}-rtl &`]: { + float: 'right', + }, + + ' > span': { + position: 'relative', + display: 'block', + minWidth: ' 32px', + fontSize: `${token.fontSize}`, + lineHeight: `${token.lineHeight}`, + cursor: 'pointer', + '&:hover': { + color: ` ${token.colorPrimary}`, + transition: 'color 0.3s', + }, + + [` a:not( ${componentCls}-btn), + > ${componentCls}-css-prefix}`]: { + display: ' inline-block', + width: '100%', + // color: ` $ @text-color-secondary`; + lineHeight: ' 22px', + transition: ' color 0.3s', + + '&:hover': { + color: `${token.colorPrimary}`, + }, + }, + + [`>${token.iconCls}`]: { + fontSize: `${token.fontSizeIcon}`, + lineHeight: '22px', + }, + }, + + ' &:not(:last-child)': { + borderRight: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + + [` ${componentCls}-rtl &`]: { + borderRight: 'none', + borderLeft: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + }, + '&-type-inner &-head': { + padding: `0 ${cardPaddingBase}`, + color: 'red', + background: `${token.colorBgBase}`, + + ' &-title': { + padding: `${cardHeadPaddingSm} 0`, + fontSize: `${token.fontSize}`, + }, + }, + '&-type-inner &-body': { + padding: `16px ${cardPaddingBase}`, + }, + ' &-type-inner &-extra': { + padding: `${cardHeadPaddingSm} + 1.5px 0`, + }, + ' &-meta': { + margin: ' -4px 0', + ...clearFix(), + + '&-avatar': { + float: 'left', + paddingRight: '16px', + + [` ${componentCls}-rtl &`]: { + float: 'right', + paddingRight: 0, + paddingLeft: ' 16px', + }, + }, + + ' &-detail ': { + overflow: 'hidden', + + ' > div:not(:last-child)': { + marginBottom: `${token.marginXS}`, + }, + }, + + ' &-title': { + overflow: 'hidden', + color: `${token.colorBgBase}`, + fontWeight: '500', + fontSize: `${token.fontSizeLG}`, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + ' &-description': { + color: ' @text-color-secondary', + }, + }, + '&-loading': { + overflow: 'hidden', + }, + '&-loading &-body': { + userSelect: 'none', + }, + + ' &-loading-content': { + p: { + margin: 0, + }, + }, + ' &-loading-block': { + height: '14px', + margin: ' 4px 0', + background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + backgroundSize: '600% 600%', + borderRadius: `${token.borderRadius}`, + animation: 'card-loading 1.4s ease infinite', + }, + }, + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Card', + token => { + const cardToken = mergeToken(token, { + cardPaddingBase: '16px', + cardHeadHeight: ' 36px', + cardHeadFontSize: `${token.fontSizeHeading5}`, + CardHeadPadding: '8.5px', + cardPaddingBaseSm: '12px', + cardHeadHeightSm: '30px', + cardHeadPaddingSm: '6px', + cardActionsLiMargin: '4px 0', + cardHeadTabsMarginBottom: '-9px', + cardShadow: + '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + }); + return [genSharedDividerStyle(cardToken)]; + }, + { + sizePaddingEdgeHorizontal: 0, + }, +); diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 1ab67bfcc5..4b25dbe868 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -1,7 +1,7 @@ -import '../../style/index.less'; -import './index.less'; +// import '../../style/index.less'; +// import './index.less'; -// style dependencies -import '../../tabs/style'; -import '../../row/style'; -import '../../col/style'; +// // style dependencies +// import '../../tabs/style'; +// import '../../row/style'; +// import '../../col/style'; diff --git a/components/style.ts b/components/style.ts index 338d6438b8..a76d363a6c 100644 --- a/components/style.ts +++ b/components/style.ts @@ -17,7 +17,7 @@ import './input/style'; import './mentions/style'; // import './dropdown/style'; // import './divider/style'; -import './card/style'; +// import './card/style'; import './collapse/style'; import './carousel/style'; // import './notification/style'; @@ -53,7 +53,7 @@ import './drawer/style'; import './comment/style'; // import './config-provider/style'; import './empty/style'; -import './statistic/style'; +// import './statistic/style'; import './result/style'; // import './descriptions/style'; import './page-header/style'; diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8e7a5bf3cb..70c71f78a0 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -5,7 +5,7 @@ import type { ComponentToken as BackTopComponentToken } from '../../back-top/sty import type { ComponentToken as ButtonComponentToken } from '../../button/style'; // import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'; // import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; -// import type { ComponentToken as CardComponentToken } from '../../card/style'; +import type { ComponentToken as CardComponentToken } from '../../card/style'; // import type { ComponentToken as CarouselComponentToken } from '../../carousel/style'; // import type { ComponentToken as CascaderComponentToken } from '../../cascader/style'; // import type { ComponentToken as CheckboxComponentToken } from '../../checkbox/style'; @@ -49,6 +49,7 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; // import type { ComponentToken as AppComponentToken } from '../../app/style'; // import type { ComponentToken as WaveToken } from '../../_util/wave/style'; +import type { ComponentToken as StatisticComponentToken } from '../../statistic/style'; export interface ComponentTokenMap { Affix?: {}; @@ -59,7 +60,7 @@ export interface ComponentTokenMap { Badge?: {}; Button?: ButtonComponentToken; Breadcrumb?: {}; - // Card?: CardComponentToken; + Card?: CardComponentToken; // Carousel?: CarouselComponentToken; // Cascader?: CascaderComponentToken; // Checkbox?: CheckboxComponentToken; @@ -91,7 +92,7 @@ export interface ComponentTokenMap { Skeleton?: SkeletonComponentToken; // Slider?: SliderComponentToken; Spin?: SpinComponentToken; - Statistic?: {}; + Statistic?: StatisticComponentToken; Switch?: {}; Tag?: TagComponentToken; Tree?: {}; diff --git a/package.json b/package.json index 0a8f9d8058..c1c9c9f26d 100644 --- a/package.json +++ b/package.json @@ -280,6 +280,7 @@ "@emotion/hash": "^0.9.0", "@emotion/unitless": "^0.8.0", "@simonwep/pickr": "~1.8.0", + "ant-design-vue": "link:", "array-tree-filter": "^2.1.0", "async-validator": "^4.0.0", "csstype": "^3.1.1", From 8331bcbe9f42a4e963c422e64d759685aeb54cab Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 17:33:01 +0800 Subject: [PATCH 2/9] switch --- components/card/Grid.tsx | 7 +- components/card/Meta.tsx | 6 +- components/card/style/index.ts | 335 ---------------------------- components/card/style/index.tsx | 378 +++++++++++++++++++++++++++++++- components/card/style/size.less | 20 -- 5 files changed, 378 insertions(+), 368 deletions(-) delete mode 100644 components/card/style/index.ts delete mode 100644 components/card/style/size.less diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index c18bdecdb4..aafff1ee26 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -1,7 +1,6 @@ import type { ExtractPropTypes } from 'vue'; import { defineComponent, computed } from 'vue'; import useConfigInject from '../config-provider/hooks/useConfigInject'; -import useStyle from './style'; export const cardGridProps = () => ({ prefixCls: String, @@ -16,13 +15,15 @@ export default defineComponent({ props: cardGridProps(), setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); - const [wrapSSR, hashId] = useStyle(prefixCls); //安装style const classNames = computed(() => { return { [`${prefixCls.value}-grid`]: true, [`${prefixCls.value}-grid-hoverable`]: props.hoverable, }; }); - return wrapSSR(
{slots.default?.()}
); + return () => { + return
{slots.default?.()}
; + }; + // return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index aa5b7fa1b4..55b4bb06a9 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -3,7 +3,6 @@ import { defineComponent } from 'vue'; import PropTypes from '../_util/vue-types'; import { getPropsSlot } from '../_util/props-util'; import useConfigInject from '../config-provider/hooks/useConfigInject'; -import useStyle from './style'; export const cardMetaProps = () => ({ prefixCls: String, @@ -19,7 +18,6 @@ export default defineComponent({ slots: ['title', 'description', 'avatar'], setup(props, { slots }) { const { prefixCls } = useConfigInject('card', props); - const [wrapSSR, hashId] = useStyle(prefixCls); return () => { const classString = { [`${prefixCls.value}-meta`]: true, @@ -42,11 +40,11 @@ export default defineComponent({ {descriptionDom} ) : null; - return wrapSSR( + return (
{avatarDom} {MetaDetail} -
, + ); }; }, diff --git a/components/card/style/index.ts b/components/card/style/index.ts deleted file mode 100644 index bc9d99feee..0000000000 --- a/components/card/style/index.ts +++ /dev/null @@ -1,335 +0,0 @@ -import type { CSSObject } from '../../_util/cssinjs'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { resetComponent, clearFix } from '../../_style'; -// import type { GlobalToken } from '../../theme/interface'; -/** Component only token. Which will handle additional calculation of alias token */ -export interface ComponentToken { - // sizePaddingEdgeHorizontal: number; -} -interface CardToken extends FullToken<'Card'> { - cardHeadFontSize: string; - CardHeadPadding: string; - cardPaddingBase: string; - cardPaddingBaseSm: string; - cardHeadHeightSm: string; - cardHeadPaddingSm: string; - cardActionsLiMargin: string; - cardHeadTabsMarginBottom: string; - cardHeadHeight: string; - cardShadow: string; -} -// ============================== Shared ============================== -const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; - const { - cardHeadFontSize, - CardHeadPadding, - cardPaddingBase, - cardPaddingBaseSm, - cardHeadHeightSm, - cardHeadPaddingSm, - cardActionsLiMargin, - cardHeadTabsMarginBottom, - cardHeadHeight, - componentCls, - } = token; - return { - [componentCls]: { - ...resetComponent(token), - position: `relative`, - background: `${token.colorBgBase}`, - borderRadius: `${token.borderRadiusXS}px`, - '&-bordered': { - border: `1px solid #f0f0f0`, - }, - '&-rtl': { - direction: 'rtl', - }, - [`${componentCls}-hoverable`]: { - cursor: 'pointer', - transition: ` box-shadow 0.3s, ${token.colorBorder} 0.3s`, - border: 'solid red 1px', - '&::hover': { - border: 'solid red 1px', - borderColor: `${token.colorBgBase}`, - boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.64), 0 3px 6px 0 rgba(0, 0, 0, 0.48), - 0 5px 12px 4px rgba(0, 0, 0, 0.36)`, - }, - }, - [`${componentCls}-head`]: { - minHeight: `${cardHeadHeight}`, - marginBottom: `-1px`, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - fontWeight: 500, - fontSize: `${token.cardHeadFontSize}px`, - background: `transparent`, - borderBottom: '1px solid #f0f0f0', - border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, - ...clearFix(), - // &-bordered { - // border: @border-width-base @border-style-base @border-color-split; - // } - '&-wrapper': { - display: 'flex', - alignItems: 'center', - }, - '&-title': { - display: 'inline-block', - flex: 1, - // padding: `${token.cardPaddingBase} 0`, - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { - left: 0, - marginTop: 0, - marginBottom: 0, - }, - }, - - [`${componentCls}-prefix-tabs-top`]: { - clear: 'both', - marginBottom: `${token.margin}`, - color: `${token.colorText}`, - // fontWeight: 'normal', - fontWeight: 400, - fontSize: `${token.fontSize}`, - '&-bar': { - // borderBottom:`${token.cardShadow}` - // @border-width-base @border-style-base @border-color-split; - }, - }, - }, - [`${componentCls}-extra`]: { - float: 'right', - // https://stackoverflow.com/a/22429853/3040605 - marginLeft: 'auto', - padding: `${cardHeadHeight} 0`, - color: `${token.colorText}`, - // fontWeight: `${token.}`, - fontWeight: 400, - fontSize: `${token.fontSize}`, - [`${componentCls}-prefix-rtl &`]: { - marginRight: 'auto', - marginLeft: 0, - }, - }, - [`${componentCls}-body`]: { - padding: `${cardPaddingBase}`, - ...clearFix(), - }, - [`${componentCls}-contain-grid:not(&-loading) &-body`]: { - margin: ' -1px 0 0 -1px', - padding: 0, - }, - [`${componentCls}-grid`]: { - float: 'left', - width: '33.33%', - padding: `${cardPaddingBase}`, - border: 0, - borderRadius: 0, - boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, - 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, - 0 1px 0 0 ${token.colorSplit} inset; - transition: all 0.3s`, - [`${componentCls}-cls-rtl &`]: { - float: 'right', - }, - - '&-hoverable': { - '&:hover': { - position: 'relative', - zIndex: 1, - boxShadow: `${token.boxShadow}`, - }, - }, - }, - - [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { - minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, - paddingBottom: 0, - }, - [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { - paddingBottom: 0, - }, - [` ${componentCls}-bordered > ${componentCls}-cover `]: { - marginTop: '-1px', - marginRight: '-1px', - marginLeft: '-1px', - }, - [`${componentCls}-cover`]: { - ' > *': { - display: 'block', - width: '100%', - }, - - img: { - borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, - }, - }, - - ' &-actions': { - margin: 0, - padding: 0, - listStyle: 'none', - background: `${token.colorBgBase}`, - // @card-actions-background; - borderTop: `${token.BackTop}`, - // @border-width-base @border-style-base @border-color-split; - ...clearFix(), - - '& > li': { - float: 'left', - margin: `${cardActionsLiMargin}`, - color: `~@text-color-secondary`, - textAlign: 'center', - - [` ${componentCls}-rtl &`]: { - float: 'right', - }, - - ' > span': { - position: 'relative', - display: 'block', - minWidth: ' 32px', - fontSize: `${token.fontSize}`, - lineHeight: `${token.lineHeight}`, - cursor: 'pointer', - '&:hover': { - color: ` ${token.colorPrimary}`, - transition: 'color 0.3s', - }, - - [` a:not( ${componentCls}-btn), - > ${componentCls}-css-prefix}`]: { - display: ' inline-block', - width: '100%', - // color: ` $ @text-color-secondary`; - lineHeight: ' 22px', - transition: ' color 0.3s', - - '&:hover': { - color: `${token.colorPrimary}`, - }, - }, - - [`>${token.iconCls}`]: { - fontSize: `${token.fontSizeIcon}`, - lineHeight: '22px', - }, - }, - - ' &:not(:last-child)': { - borderRight: `${token.borderRadius}`, - // @border-width-base @border-style-base @border-color-split; - - [` ${componentCls}-rtl &`]: { - borderRight: 'none', - borderLeft: `${token.borderRadius}`, - // @border-width-base @border-style-base @border-color-split; - }, - }, - }, - }, - '&-type-inner &-head': { - padding: `0 ${cardPaddingBase}`, - color: 'red', - background: `${token.colorBgBase}`, - - ' &-title': { - padding: `${cardHeadPaddingSm} 0`, - fontSize: `${token.fontSize}`, - }, - }, - '&-type-inner &-body': { - padding: `16px ${cardPaddingBase}`, - }, - ' &-type-inner &-extra': { - padding: `${cardHeadPaddingSm} + 1.5px 0`, - }, - ' &-meta': { - margin: ' -4px 0', - ...clearFix(), - - '&-avatar': { - float: 'left', - paddingRight: '16px', - - [` ${componentCls}-rtl &`]: { - float: 'right', - paddingRight: 0, - paddingLeft: ' 16px', - }, - }, - - ' &-detail ': { - overflow: 'hidden', - - ' > div:not(:last-child)': { - marginBottom: `${token.marginXS}`, - }, - }, - - ' &-title': { - overflow: 'hidden', - color: `${token.colorBgBase}`, - fontWeight: '500', - fontSize: `${token.fontSizeLG}`, - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }, - - ' &-description': { - color: ' @text-color-secondary', - }, - }, - '&-loading': { - overflow: 'hidden', - }, - '&-loading &-body': { - userSelect: 'none', - }, - - ' &-loading-content': { - p: { - margin: 0, - }, - }, - ' &-loading-block': { - height: '14px', - margin: ' 4px 0', - background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', - backgroundSize: '600% 600%', - borderRadius: `${token.borderRadius}`, - animation: 'card-loading 1.4s ease infinite', - }, - }, - }; -}; - -// ============================== Export ============================== -export default genComponentStyleHook( - 'Card', - token => { - const cardToken = mergeToken(token, { - cardPaddingBase: '16px', - cardHeadHeight: ' 36px', - cardHeadFontSize: `${token.fontSizeHeading5}`, - CardHeadPadding: '8.5px', - cardPaddingBaseSm: '12px', - cardHeadHeightSm: '30px', - cardHeadPaddingSm: '6px', - cardActionsLiMargin: '4px 0', - cardHeadTabsMarginBottom: '-9px', - cardShadow: - '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', - }); - return [genSharedDividerStyle(cardToken)]; - }, - { - sizePaddingEdgeHorizontal: 0, - }, -); diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 4b25dbe868..d96664fe78 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -1,7 +1,373 @@ -// import '../../style/index.less'; -// import './index.less'; +import type { CSSObject } from '../../_util/cssinjs'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { resetComponent, clearFix } from '../../_style'; +// import type { GlobalToken } from '../../theme/interface'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // sizePaddingEdgeHorizontal: number; +} +interface CardToken extends FullToken<'Card'> { + cardHeadFontSize: string; + CardHeadPadding: string; + cardPaddingBase: string; + cardPaddingBaseSm: string; + cardHeadHeightSm: string; + cardHeadPaddingSm: string; + cardActionsLiMargin: string; + cardHeadTabsMarginBottom: string; + cardHeadHeight: string; + cardShadow: string; + cardHeadFontSizeSm:string; +} +// ============================== Shared ============================== +const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { + // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + cardHeadFontSize, + CardHeadPadding, + cardPaddingBase, + cardPaddingBaseSm, + cardHeadHeightSm, + cardHeadPaddingSm, + cardActionsLiMargin, + cardHeadFontSizeSm, + cardHeadTabsMarginBottom, + cardHeadHeight, + componentCls, + } = token; + return { + [`${componentCls}-small`]:{ + [` > ${componentCls}-head`]:{ + minHeight: `${cardHeadHeightSm}`, + padding: `0 ${cardPaddingBaseSm}`, + fontSize: `${cardHeadFontSizeSm}`, + [`> ${componentCls}-head-wrapper`]: { + [`> ${componentCls}-head-title`]: { + padding:`${cardHeadPaddingSm} 0`, + }, + [`> ${componentCls}-head-extra`]:{ + padding:`${cardHeadPaddingSm} 0`, + fontSize: `${cardHeadFontSizeSm}`, + } + } + }, + [`> ${componentCls}-body`]:{ + padding: `${cardPaddingBaseSm}` + } + }, + [componentCls]: { + ...resetComponent(token), + position: `relative`, + background: `${token.colorBgBase}`, + borderRadius: `${token.borderRadiusXS}px`, + '&-bordered': { + border: `1px solid #f0f0f0`, + }, + [`${componentCls}-rtl`]: { + direction: 'rtl', + }, + [`&-hoverable`]: { + cursor: 'pointer', + transition: ` box-shadow 0.3s, border-color 0.3s`, + '&:hover': { + borderColor: `${token.colorBgBase}`, + // boxShadow: `${token.boxShadow}`, + boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12)`, -// // style dependencies -// import '../../tabs/style'; -// import '../../row/style'; -// import '../../col/style'; + + }, + }, + [`${componentCls}-head`]: { + minHeight: `${cardHeadHeight}`, + marginBottom: `-1px`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + padding: ` 0 ${token.cardPaddingBase} `, + fontWeight: 500, + fontSize: `${cardHeadFontSize}px`, + background: `transparent`, + borderBottom: '1px solid #f0f0f0', + border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, + ...clearFix(), + // &-bordered { + // border: @border-width-base @border-style-base @border-color-split; + // } + '&-wrapper': { + display: 'flex', + alignItems: 'center', + }, + '&-title': { + display: 'inline-block', + flex: 1, + padding: `${CardHeadPadding} 0`, + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { + left: 0, + marginTop: 0, + marginBottom: 0, + }, + }, + + [`${componentCls}-prefix-tabs-top`]: { + clear: 'both', + marginBottom: `${token.margin}`, + color: `${token.colorText}`, + // fontWeight: 'normal', + fontWeight: 400, + fontSize: `${token.fontSize}`, + '&-bar': { + // borderBottom:`${token.cardShadow}` + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + [`${componentCls}-extra`]: { + float: 'right', + // https://stackoverflow.com/a/22429853/3040605 + marginLeft: 'auto', + padding: `${CardHeadPadding} 0`, + color: `${token.colorText}`, + // fontWeight: `${token.}`, + fontWeight: 400, + fontSize: `${token.fontSize}`, + [`${componentCls}-prefix-rtl &`]: { + marginRight: 'auto', + marginLeft: 0, + }, + }, + [`${componentCls}-body`]: { + padding: `${cardPaddingBase}`, + ...clearFix(), + }, + [`${componentCls}-contain-grid:not(${componentCls}-loading) ${componentCls}-body`]: { + margin: ' -1px 0 0 -1px', + padding: 0, + }, + [`${componentCls}-grid`]: { + float: 'left', + width: '33.33%', + padding: `${cardPaddingBase}`, + border: 0, + borderRadius: 0, + boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, + 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, + 0 1px 0 0 ${token.colorSplit} inset; + transition: all 0.3s`, + [`${componentCls}-cls-rtl &`]: { + float: 'right', + }, + + '&-hoverable': { + '&:hover': { + position: 'relative', + zIndex: 1, + boxShadow: `${token.boxShadow}`, + }, + }, + }, + + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { + minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, + paddingBottom: 0, + }, + [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-extra`]: { + paddingBottom: 0, + }, + [` ${componentCls}-bordered > ${componentCls}-cover `]: { + marginTop: '-1px', + marginRight: '-1px', + marginLeft: '-1px', + }, + [`${componentCls}-cover`]: { + ' > *': { + display: 'block', + width: '100%', + }, + + img: { + borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + }, + }, + + [`${componentCls}-actions`]: { + margin: 0, + padding: 0, + listStyle: 'none', + background: `${token.colorBgBase}`, + // @card-actions-background; + borderTop: `${token.BackTop}`, + // @border-width-base @border-style-base @border-color-split; + ...clearFix(), + + '& > li': { + float: 'left', + margin: `${cardActionsLiMargin}`, + color: `~@text-color-secondary`, + textAlign: 'center', + + [` ${componentCls}-rtl &`]: { + float: 'right', + }, + + ' > span': { + position: 'relative', + display: 'block', + minWidth: ' 32px', + fontSize: `${token.fontSize}`, + lineHeight: `${token.lineHeight}`, + cursor: 'pointer', + '&:hover': { + color: ` ${token.colorPrimary}`, + transition: 'color 0.3s', + }, + + [` a:not( ${componentCls}-btn), + > ${componentCls}-css-prefix}`]: { + display: ' inline-block', + width: '100%', + // color: ` $ @text-color-secondary`; + lineHeight: ' 22px', + transition: ' color 0.3s', + + '&:hover': { + color: `${token.colorPrimary}`, + }, + }, + + [`>${token.iconCls}`]: { + fontSize: `${token.fontSizeIcon}`, + lineHeight: '22px', + }, + }, + + ' &:not(:last-child)': { + borderRight: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + + [` ${componentCls}-rtl &`]: { + borderRight: 'none', + borderLeft: `${token.borderRadius}`, + // @border-width-base @border-style-base @border-color-split; + }, + }, + }, + }, + '&-type-inner &-head': { + padding: `0 ${cardPaddingBase}`, + color: 'red', + background: `${token.colorBgBase}`, + + ' &-title': { + padding: `${cardHeadPaddingSm} 0`, + fontSize: `${token.fontSize}`, + }, + }, + '&-type-inner &-body': { + padding: `16px ${cardPaddingBase}`, + }, + ' &-type-inner &-extra': { + padding: `${cardHeadPaddingSm} + 1.5px 0`, + }, + [`${componentCls}-meta`]: { + margin: ' -4px 0', + ...clearFix(), + + '&-avatar': { + float: 'left', + paddingRight: '16px', + + [` ${componentCls}-rtl &`]: { + float: 'right', + paddingRight: 0, + paddingLeft: ' 16px', + }, + }, + + ' &-detail ': { + overflow: 'hidden', + + ' > div:not(:last-child)': { + marginBottom: `${token.marginXS}`, + }, + }, + + ' &-title': { + overflow: 'hidden', + color: `${token.colorBgBase}`, + fontWeight: '500', + fontSize: `${token.fontSizeLG}`, + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + ' &-description': { + color: ' @text-color-secondary', + }, + }, + '&-loading': { + overflow: 'hidden', + }, + '&-loading &-body': { + userSelect: 'none', + }, + + ' &-loading-content': { + p: { + margin: 0, + }, + }, + [` ${componentCls}-loading-block`]: { + height: '14px', + margin: ' 4px 0', + background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + backgroundSize: '600% 600%', + borderRadius: `${token.borderRadius}`, + animationName:"card-loading", + animationDuration:'1.4s', + animationTimingFunction:'ease', + animationIterationCount:'infinite' + + // animation: ' 1.4s ease infinite', + }, + '@keyframes card-loading': { + ' 0%,100% ':{ + backgroundPosition: '0 50%', + }, + '50%':{ + backgroundPosition: '100% 50%', + } + } + }, + + + }; +}; + +// ============================== Export ============================== +export default genComponentStyleHook( + 'Card', + token => { + const cardToken = mergeToken(token, { + cardPaddingBase: '16px', + cardHeadHeight: ' 36px', + cardHeadFontSize: `${token.fontSizeHeading5}`, + cardHeadFontSizeSm: `${token.fontSize}`, + CardHeadPadding: '8.5px', + cardPaddingBaseSm: '12px', + cardHeadHeightSm: '30px', + cardHeadPaddingSm: '6px', + cardActionsLiMargin: '4px 0', + cardHeadTabsMarginBottom: '-9px', + cardShadow: + '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + }); + return [genSharedDividerStyle(cardToken)]; + }, + { + sizePaddingEdgeHorizontal: 0, + }, +); diff --git a/components/card/style/size.less b/components/card/style/size.less deleted file mode 100644 index d78f464a7a..0000000000 --- a/components/card/style/size.less +++ /dev/null @@ -1,20 +0,0 @@ -.@{card-prefix-cls}-small { - > .@{card-prefix-cls}-head { - min-height: @card-head-height-sm; - padding: 0 @card-padding-base-sm; - font-size: @card-head-font-size-sm; - - > .@{card-prefix-cls}-head-wrapper { - > .@{card-prefix-cls}-head-title { - padding: @card-head-padding-sm 0; - } - > .@{card-prefix-cls}-extra { - padding: @card-head-padding-sm 0; - font-size: @card-head-font-size-sm; - } - } - } - > .@{card-prefix-cls}-body { - padding: @card-padding-base-sm; - } -} From f0d58e911ced399a6374ef6df6c0ad149213ac9b Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 19:41:43 +0800 Subject: [PATCH 3/9] Style adjustment --- components/card/style/index.tsx | 93 +++++++++++++++++---------------- components/input/style/index.ts | 1 - 2 files changed, 49 insertions(+), 45 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index d96664fe78..445c65cf0a 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -19,11 +19,14 @@ interface CardToken extends FullToken<'Card'> { cardHeadHeight: string; cardShadow: string; cardHeadFontSizeSm:string; + cardHeadColor:string; + gradientMin:string, + gradientMax:string, + cardInnerHeadPadding:string } // ============================== Shared ============================== const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - // const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; - const { + const { cardHeadFontSize, CardHeadPadding, cardPaddingBase, @@ -35,6 +38,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { cardHeadTabsMarginBottom, cardHeadHeight, componentCls, + cardHeadColor, + cardShadow } = token; return { [`${componentCls}-small`]:{ @@ -72,9 +77,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { transition: ` box-shadow 0.3s, border-color 0.3s`, '&:hover': { borderColor: `${token.colorBgBase}`, - // boxShadow: `${token.boxShadow}`, - boxShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12)`, - + boxShadow: `${cardShadow}` }, }, @@ -83,6 +86,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { marginBottom: `-1px`, overflow: 'hidden', whiteSpace: 'nowrap', + color:`${cardHeadColor}`, textOverflow: 'ellipsis', padding: ` 0 ${token.cardPaddingBase} `, fontWeight: 500, @@ -114,7 +118,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-prefix-tabs-top`]: { clear: 'both', - marginBottom: `${token.margin}`, + marginBottom: `${cardHeadTabsMarginBottom}`, color: `${token.colorText}`, // fontWeight: 'normal', fontWeight: 400, @@ -165,7 +169,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { '&:hover': { position: 'relative', zIndex: 1, - boxShadow: `${token.boxShadow}`, + boxShadow: `${cardShadow}`, }, }, }, @@ -189,7 +193,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, img: { - borderRadius: `${token.borderRadius} ${token.borderRadius} 0 0 `, + borderRadius: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, }, }, @@ -205,10 +209,11 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { '& > li': { float: 'left', - margin: `${cardActionsLiMargin}`, - color: `~@text-color-secondary`, + margin: `${cardActionsLiMargin} `, + color: `${token.colorTextDescription}`, textAlign: 'center', - + borderTop: ` 1px solid #f0f0f0;`, + [` ${componentCls}-rtl &`]: { float: 'right', }, @@ -217,7 +222,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { position: 'relative', display: 'block', minWidth: ' 32px', - fontSize: `${token.fontSize}`, + fontSize: `${token.fontSize}px`, lineHeight: `${token.lineHeight}`, cursor: 'pointer', '&:hover': { @@ -225,11 +230,10 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { transition: 'color 0.3s', }, - [` a:not( ${componentCls}-btn), - > ${componentCls}-css-prefix}`]: { + [`a:not(${componentCls}-btn), >${token.iconCls}-css-prefix}`]: { display: ' inline-block', width: '100%', - // color: ` $ @text-color-secondary`; + color: `${token.colorTextDescription}`, lineHeight: ' 22px', transition: ' color 0.3s', @@ -244,33 +248,33 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, }, - ' &:not(:last-child)': { - borderRight: `${token.borderRadius}`, + [`li:not(:last-child)`]: { + borderRight: `1px solid #f0f0f0;`, // @border-width-base @border-style-base @border-color-split; - [` ${componentCls}-rtl &`]: { borderRight: 'none', - borderLeft: `${token.borderRadius}`, + borderLeft: ` 1px solid #f0f0f0;`, // @border-width-base @border-style-base @border-color-split; }, }, }, }, - '&-type-inner &-head': { + [`${componentCls}-type-inner ${componentCls}-head`]: { padding: `0 ${cardPaddingBase}`, - color: 'red', background: `${token.colorBgBase}`, + border:'solid red 1px', ' &-title': { padding: `${cardHeadPaddingSm} 0`, - fontSize: `${token.fontSize}`, + fontSize: `${token.fontSize}px`, }, }, - '&-type-inner &-body': { + [`${componentCls}-type-inner ${componentCls}-body`]: { + border:'solid red 1px', padding: `16px ${cardPaddingBase}`, }, ' &-type-inner &-extra': { - padding: `${cardHeadPaddingSm} + 1.5px 0`, + padding: `${token.cardInnerHeadPadding} + 1.5px 0`, }, [`${componentCls}-meta`]: { margin: ' -4px 0', @@ -287,35 +291,34 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, }, - ' &-detail ': { + '&-detail ': { overflow: 'hidden', - - ' > div:not(:last-child)': { - marginBottom: `${token.marginXS}`, + '> div:not(:last-child)': { + marginBottom: `${token['magenta-8']}`, }, }, - ' &-title': { + '&-title': { overflow: 'hidden', - color: `${token.colorBgBase}`, + color: `${cardHeadColor}`, fontWeight: '500', - fontSize: `${token.fontSizeLG}`, + fontSize: `${token.fontSizeLG}px`, whiteSpace: 'nowrap', textOverflow: 'ellipsis', }, ' &-description': { - color: ' @text-color-secondary', + color: `${token.colorTextDescription}`, }, }, - '&-loading': { + [` ${componentCls}-loading`]: { overflow: 'hidden', }, - '&-loading &-body': { + [` ${componentCls}-loading ${componentCls}-body`]: { userSelect: 'none', }, - ' &-loading-content': { + [` ${componentCls}-loading-content`]: { p: { margin: 0, }, @@ -323,18 +326,16 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [` ${componentCls}-loading-block`]: { height: '14px', margin: ' 4px 0', - background: 'linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min)', + background: `linear-gradient(90deg,${token.gradientMin},${token.gradientMax}, ${token.gradientMin})`, backgroundSize: '600% 600%', - borderRadius: `${token.borderRadius}`, + borderRadius: `${token.borderRadiusXS}px`, animationName:"card-loading", animationDuration:'1.4s', animationTimingFunction:'ease', animationIterationCount:'infinite' - - // animation: ' 1.4s ease infinite', }, '@keyframes card-loading': { - ' 0%,100% ':{ + '0%,100% ':{ backgroundPosition: '0 50%', }, '50%':{ @@ -360,10 +361,14 @@ export default genComponentStyleHook( cardPaddingBaseSm: '12px', cardHeadHeightSm: '30px', cardHeadPaddingSm: '6px', - cardActionsLiMargin: '4px 0', - cardHeadTabsMarginBottom: '-9px', - cardShadow: - '0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12),0 5px 12px 4px rgba(0, 0, 0, 0.09)', + cardActionsLiMargin: '12px 0', + cardHeadTabsMarginBottom: '-17px', + cardShadow:`0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), + 0 5px 12px 4px rgba(0, 0, 0, 0.09)`, + cardHeadColor:' fade(@black, 85%)', + gradientMin: 'rgba(207,216,220,.2)', + gradientMax:'rgba(207,216,220,.4)', + cardInnerHeadPadding:'12px', }); return [genSharedDividerStyle(cardToken)]; }, diff --git a/components/input/style/index.ts b/components/input/style/index.ts index edbcb16dd7..dd011183d4 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -904,7 +904,6 @@ const genTextAreaStyle: GenerateStyle = token => { [`> ${componentCls}`]: { height: '100%', }, - '&::after': { color: token.colorTextDescription, whiteSpace: 'nowrap', From 900b80310f94bd5f69692a5fb0abf64001406908 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 20:03:28 +0800 Subject: [PATCH 4/9] refactor(Card): less to cssinjs --- components/card/style/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 445c65cf0a..016ea10b4e 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -203,7 +203,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { listStyle: 'none', background: `${token.colorBgBase}`, // @card-actions-background; - borderTop: `${token.BackTop}`, + // borderTop: `${token.BackTop}`, + borderTop: `1px solid #f0f0f0`, // @border-width-base @border-style-base @border-color-split; ...clearFix(), @@ -212,8 +213,6 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { margin: `${cardActionsLiMargin} `, color: `${token.colorTextDescription}`, textAlign: 'center', - borderTop: ` 1px solid #f0f0f0;`, - [` ${componentCls}-rtl &`]: { float: 'right', }, From b84835b118e982fbe6e11ff41b449e05104ff00e Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Thu, 9 Feb 2023 20:09:45 +0800 Subject: [PATCH 5/9] Eliminate invalid code --- components/card/Grid.tsx | 2 -- components/theme/interface/components.ts | 3 +-- package.json | 1 - 3 files changed, 1 insertion(+), 5 deletions(-) diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index aafff1ee26..bcbc8aa4f5 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -10,7 +10,6 @@ export type CardGridProps = Partial { return
{slots.default?.()}
; }; - // return wrapSSR(
{slots.default?.()}
); }, }); diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 924ff0027b..63dfcfb4ed 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -49,7 +49,6 @@ import type { ComponentToken as TooltipComponentToken } from '../../tooltip/styl // import type { ComponentToken as QRCodeComponentToken } from '../../qrcode/style'; // import type { ComponentToken as AppComponentToken } from '../../app/style'; // import type { ComponentToken as WaveToken } from '../../_util/wave/style'; -import type { ComponentToken as StatisticComponentToken } from '../../statistic/style'; export interface ComponentTokenMap { Affix?: {}; @@ -94,7 +93,7 @@ export interface ComponentTokenMap { Skeleton?: SkeletonComponentToken; // Slider?: SliderComponentToken; Spin?: SpinComponentToken; - Statistic?: StatisticComponentToken; + Statistic?: {}; Switch?: {}; Tag?: TagComponentToken; Tree?: {}; diff --git a/package.json b/package.json index c1c9c9f26d..0a8f9d8058 100644 --- a/package.json +++ b/package.json @@ -280,7 +280,6 @@ "@emotion/hash": "^0.9.0", "@emotion/unitless": "^0.8.0", "@simonwep/pickr": "~1.8.0", - "ant-design-vue": "link:", "array-tree-filter": "^2.1.0", "async-validator": "^4.0.0", "csstype": "^3.1.1", From 0c7584321e67860a0cbd01d4dd44e65eeb78de28 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 10 Feb 2023 09:53:58 +0800 Subject: [PATCH 6/9] optimization and adjustment css --- components/card/Card.tsx | 10 +- components/card/style/index.less | 308 --------------------- components/card/style/index.tsx | 44 ++- components/theme/interface/presetColors.ts | 2 +- 4 files changed, 20 insertions(+), 344 deletions(-) delete mode 100644 components/card/style/index.less diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 2fc3a4d0ed..524961eb7d 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -56,9 +56,8 @@ const Card = defineComponent({ props: cardProps(), slots: ['title', 'extra', 'tabBarExtraContent', 'actions', 'cover', 'customTab'], setup(props, { slots, attrs }) { - const { prefixCls, direction, size } = useConfigInject('card', props); //注入 - // console.log('prefixCls', prefixCls); - const [wrapSSR, hashId] = useStyle(prefixCls); //安装style + const { prefixCls, direction, size } = useConfigInject('card', props); + const [wrapSSR, hashId] = useStyle(prefixCls); const getAction = (actions: VNodeTypes[]) => { const actionList = actions.map((action, index) => (isVNode(action) && !isEmptyElement(action)) || !isVNode(action) ? ( @@ -101,7 +100,6 @@ const Card = defineComponent({ } = props; const children = flattenChildren(slots.default?.()); const pre = prefixCls.value; - // console.log('pre', pre); const classString = { [`${pre}`]: true, [hashId.value]: true, @@ -207,7 +205,5 @@ const Card = defineComponent({ }; }, }); -{ - /*
*/ -} + export default Card; diff --git a/components/card/style/index.less b/components/card/style/index.less deleted file mode 100644 index 7c02be1f4b..0000000000 --- a/components/card/style/index.less +++ /dev/null @@ -1,308 +0,0 @@ -@import '../../style/themes/index'; -@import '../../style/mixins/index'; - -@card-prefix-cls: ~'@{ant-prefix}-card'; -@card-hoverable-hover-border: transparent; -@card-action-icon-size: 16px; - -@gradient-min: fade(@card-skeleton-bg, 20%); -@gradient-max: fade(@card-skeleton-bg, 40%); - -.@{card-prefix-cls} { - .reset-component(); - - position: relative; - background: @card-background; - border-radius: @card-radius; - - &-rtl { - direction: rtl; - } - - &-hoverable { - cursor: pointer; - transition: box-shadow 0.3s, border-color 0.3s; - - &:hover { - border-color: @card-hoverable-hover-border; - box-shadow: @card-shadow; - } - } - - &-bordered { - border: @border-width-base @border-style-base @border-color-split; - } - - &-head { - min-height: @card-head-height; - margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png - padding: 0 @card-padding-base; - color: @card-head-color; - font-weight: 500; - font-size: @card-head-font-size; - background: @card-head-background; - border-bottom: @border-width-base @border-style-base @border-color-split; - border-radius: @card-radius @card-radius 0 0; - .clearfix(); - - &-wrapper { - display: flex; - align-items: center; - } - - &-title { - display: inline-block; - flex: 1; - padding: @card-head-padding 0; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - - > .@{ant-prefix}-typography, - > .@{ant-prefix}-typography-edit-content { - left: 0; - margin-top: 0; - margin-bottom: 0; - } - } - - .@{ant-prefix}-tabs-top { - clear: both; - margin-bottom: @card-head-tabs-margin-bottom; - color: @text-color; - font-weight: normal; - font-size: @font-size-base; - - &-bar { - border-bottom: @border-width-base @border-style-base @border-color-split; - } - } - } - - &-extra { - float: right; - // https://stackoverflow.com/a/22429853/3040605 - margin-left: auto; - padding: @card-head-padding 0; - color: @card-head-extra-color; - font-weight: normal; - font-size: @font-size-base; - - .@{card-prefix-cls}-rtl & { - margin-right: auto; - margin-left: 0; - } - } - - &-body { - padding: @card-padding-base; - .clearfix(); - } - - &-contain-grid:not(&-loading) &-body { - margin: -1px 0 0 -1px; - padding: 0; - } - - &-grid { - float: left; - width: 33.33%; - padding: @card-padding-base; - border: 0; - border-radius: 0; - box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split, - 1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset, - 0 1px 0 0 @border-color-split inset; - transition: all 0.3s; - - .@{card-prefix-cls}-rtl & { - float: right; - } - - &-hoverable { - &:hover { - position: relative; - z-index: 1; - box-shadow: @card-shadow; - } - } - } - - &-contain-tabs > &-head &-head-title { - min-height: @card-head-height - @card-head-padding; - padding-bottom: 0; - } - - &-contain-tabs > &-head &-extra { - padding-bottom: 0; - } - - &-bordered &-cover { - margin-top: -1px; - margin-right: -1px; - margin-left: -1px; - } - - &-cover { - > * { - display: block; - width: 100%; - } - - img { - border-radius: @card-radius @card-radius 0 0; - } - } - - &-actions { - margin: 0; - padding: 0; - list-style: none; - background: @card-actions-background; - border-top: @border-width-base @border-style-base @border-color-split; - .clearfix(); - - & > li { - float: left; - margin: @card-actions-li-margin; - color: @text-color-secondary; - text-align: center; - - .@{card-prefix-cls}-rtl & { - float: right; - } - - > span { - position: relative; - display: block; - min-width: 32px; - font-size: @font-size-base; - line-height: @line-height-base; - cursor: pointer; - - &:hover { - color: @primary-color; - transition: color 0.3s; - } - - a:not(.@{ant-prefix}-btn), - > .@{iconfont-css-prefix} { - display: inline-block; - width: 100%; - color: @text-color-secondary; - line-height: 22px; - transition: color 0.3s; - - &:hover { - color: @primary-color; - } - } - - > .@{iconfont-css-prefix} { - font-size: @card-action-icon-size; - line-height: 22px; - } - } - - &:not(:last-child) { - border-right: @border-width-base @border-style-base @border-color-split; - - .@{card-prefix-cls}-rtl & { - border-right: none; - border-left: @border-width-base @border-style-base @border-color-split; - } - } - } - } - - &-type-inner &-head { - padding: 0 @card-padding-base; - background: @background-color-light; - - &-title { - padding: @card-inner-head-padding 0; - font-size: @font-size-base; - } - } - - &-type-inner &-body { - padding: 16px @card-padding-base; - } - - &-type-inner &-extra { - padding: @card-inner-head-padding + 1.5px 0; - } - - &-meta { - margin: -4px 0; - .clearfix(); - - &-avatar { - float: left; - padding-right: 16px; - - .@{card-prefix-cls}-rtl & { - float: right; - padding-right: 0; - padding-left: 16px; - } - } - - &-detail { - overflow: hidden; - - > div:not(:last-child) { - margin-bottom: @margin-xs; - } - } - - &-title { - overflow: hidden; - color: @card-head-color; - font-weight: 500; - font-size: @font-size-lg; - white-space: nowrap; - text-overflow: ellipsis; - } - - &-description { - color: @text-color-secondary; - } - } - - &-loading { - overflow: hidden; - } - - &-loading &-body { - user-select: none; - } - - &-loading-content { - p { - margin: 0; - } - } - - &-loading-block { - height: 14px; - margin: 4px 0; - background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min); - background-size: 600% 600%; - border-radius: @card-radius; - animation: card-loading 1.4s ease infinite; - } -} - -@keyframes card-loading { - 0%, - 100% { - background-position: 0 50%; - } - - 50% { - background-position: 100% 50%; - } -} - -@import './size'; diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 016ea10b4e..6cd888c86c 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -2,10 +2,9 @@ import type { CSSObject } from '../../_util/cssinjs'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { resetComponent, clearFix } from '../../_style'; -// import type { GlobalToken } from '../../theme/interface'; + /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { - // sizePaddingEdgeHorizontal: number; } interface CardToken extends FullToken<'Card'> { cardHeadFontSize: string; @@ -25,7 +24,7 @@ interface CardToken extends FullToken<'Card'> { cardInnerHeadPadding:string } // ============================== Shared ============================== -const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { +const genSharedCardStyle: GenerateStyle = (token): CSSObject => { const { cardHeadFontSize, CardHeadPadding, @@ -67,7 +66,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { background: `${token.colorBgBase}`, borderRadius: `${token.borderRadiusXS}px`, '&-bordered': { - border: `1px solid #f0f0f0`, + border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, }, [`${componentCls}-rtl`]: { direction: 'rtl', @@ -92,12 +91,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { fontWeight: 500, fontSize: `${cardHeadFontSize}px`, background: `transparent`, - borderBottom: '1px solid #f0f0f0', - border: `${token.borderRadiusXS}px ${token.borderRadiusXS}px 0 0 `, + borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, ...clearFix(), - // &-bordered { - // border: @border-width-base @border-style-base @border-color-split; - // } '&-wrapper': { display: 'flex', alignItems: 'center', @@ -124,8 +119,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { fontWeight: 400, fontSize: `${token.fontSize}`, '&-bar': { - // borderBottom:`${token.cardShadow}` - // @border-width-base @border-style-base @border-color-split; + borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, + }, }, }, @@ -135,7 +130,6 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { marginLeft: 'auto', padding: `${CardHeadPadding} 0`, color: `${token.colorText}`, - // fontWeight: `${token.}`, fontWeight: 400, fontSize: `${token.fontSize}`, [`${componentCls}-prefix-rtl &`]: { @@ -168,7 +162,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { '&-hoverable': { '&:hover': { position: 'relative', - zIndex: 1, + zIndex: `${token.zIndexBase}`, boxShadow: `${cardShadow}`, }, }, @@ -202,16 +196,13 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { padding: 0, listStyle: 'none', background: `${token.colorBgBase}`, - // @card-actions-background; - // borderTop: `${token.BackTop}`, - borderTop: `1px solid #f0f0f0`, - // @border-width-base @border-style-base @border-color-split; + borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, ...clearFix(), '& > li': { float: 'left', margin: `${cardActionsLiMargin} `, - color: `${token.colorTextDescription}`, + color: `${token.colorTextSecondary}`, textAlign: 'center', [` ${componentCls}-rtl &`]: { float: 'right', @@ -232,7 +223,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [`a:not(${componentCls}-btn), >${token.iconCls}-css-prefix}`]: { display: ' inline-block', width: '100%', - color: `${token.colorTextDescription}`, + color: `${token.colorTextSecondary}`, lineHeight: ' 22px', transition: ' color 0.3s', @@ -248,12 +239,10 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, [`li:not(:last-child)`]: { - borderRight: `1px solid #f0f0f0;`, - // @border-width-base @border-style-base @border-color-split; + borderRight: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, [` ${componentCls}-rtl &`]: { borderRight: 'none', - borderLeft: ` 1px solid #f0f0f0;`, - // @border-width-base @border-style-base @border-color-split; + borderLeft: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, }, }, }, @@ -261,15 +250,12 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-type-inner ${componentCls}-head`]: { padding: `0 ${cardPaddingBase}`, background: `${token.colorBgBase}`, - border:'solid red 1px', - ' &-title': { padding: `${cardHeadPaddingSm} 0`, fontSize: `${token.fontSize}px`, }, }, [`${componentCls}-type-inner ${componentCls}-body`]: { - border:'solid red 1px', padding: `16px ${cardPaddingBase}`, }, ' &-type-inner &-extra': { @@ -307,7 +293,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { }, ' &-description': { - color: `${token.colorTextDescription}`, + color: `${token.colorTextSecondary}`, }, }, [` ${componentCls}-loading`]: { @@ -351,6 +337,7 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { export default genComponentStyleHook( 'Card', token => { + const { colorFillContent } = token; const cardToken = mergeToken(token, { cardPaddingBase: '16px', cardHeadHeight: ' 36px', @@ -369,7 +356,8 @@ export default genComponentStyleHook( gradientMax:'rgba(207,216,220,.4)', cardInnerHeadPadding:'12px', }); - return [genSharedDividerStyle(cardToken)]; + console.log('colorFillContent',colorFillContent) + return [genSharedCardStyle(cardToken)]; }, { sizePaddingEdgeHorizontal: 0, diff --git a/components/theme/interface/presetColors.ts b/components/theme/interface/presetColors.ts index 2cff21512c..b20aafbf6d 100644 --- a/components/theme/interface/presetColors.ts +++ b/components/theme/interface/presetColors.ts @@ -14,7 +14,7 @@ export const PresetColors = [ 'gold', ] as const; -export type PresetColorKey = typeof PresetColors[number]; +export type PresetColorKey = (typeof PresetColors)[number]; export type PresetColorType = Record; From 7886d7738f1957aea95461294e694e44bc080a87 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Fri, 10 Feb 2023 10:13:11 +0800 Subject: [PATCH 7/9] Adjust the css --- components/card/style/index.tsx | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index 6cd888c86c..a3721f55e6 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -19,9 +19,10 @@ interface CardToken extends FullToken<'Card'> { cardShadow: string; cardHeadFontSizeSm:string; cardHeadColor:string; - gradientMin:string, - gradientMax:string, - cardInnerHeadPadding:string + gradientMin:string; + gradientMax:string; + cardInnerHeadPadding:string; + transitionTime:string; } // ============================== Shared ============================== const genSharedCardStyle: GenerateStyle = (token): CSSObject => { @@ -38,7 +39,8 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { cardHeadHeight, componentCls, cardHeadColor, - cardShadow + cardShadow, + transitionTime } = token; return { [`${componentCls}-small`]:{ @@ -73,7 +75,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { }, [`&-hoverable`]: { cursor: 'pointer', - transition: ` box-shadow 0.3s, border-color 0.3s`, + transition: ` box-shadow ${transitionTime}, border-color ${transitionTime}`, '&:hover': { borderColor: `${token.colorBgBase}`, boxShadow: `${cardShadow}` @@ -153,8 +155,8 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { borderRadius: 0, boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset, - 0 1px 0 0 ${token.colorSplit} inset; - transition: all 0.3s`, + 0 1px 0 0 ${token.colorSplit} inset`, + transition: `all ${transitionTime}`, [`${componentCls}-cls-rtl &`]: { float: 'right', }, @@ -217,7 +219,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { cursor: 'pointer', '&:hover': { color: ` ${token.colorPrimary}`, - transition: 'color 0.3s', + transition: `color ${transitionTime}`, }, [`a:not(${componentCls}-btn), >${token.iconCls}-css-prefix}`]: { @@ -225,7 +227,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { width: '100%', color: `${token.colorTextSecondary}`, lineHeight: ' 22px', - transition: ' color 0.3s', + transition: `color ${transitionTime}`, '&:hover': { color: `${token.colorPrimary}`, @@ -337,7 +339,6 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { export default genComponentStyleHook( 'Card', token => { - const { colorFillContent } = token; const cardToken = mergeToken(token, { cardPaddingBase: '16px', cardHeadHeight: ' 36px', @@ -355,8 +356,8 @@ export default genComponentStyleHook( gradientMin: 'rgba(207,216,220,.2)', gradientMax:'rgba(207,216,220,.4)', cardInnerHeadPadding:'12px', + transitionTime:'0.3s', }); - console.log('colorFillContent',colorFillContent) return [genSharedCardStyle(cardToken)]; }, { From 50d53a29266adbbe3046677a1c10232691ddd6ae Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Mon, 13 Feb 2023 10:28:23 +0800 Subject: [PATCH 8/9] Optimize each item --- components/card/Card.tsx | 2 +- components/card/Grid.tsx | 2 +- components/card/Meta.tsx | 2 +- components/card/style/index.tsx | 147 +++++++++++++++++--------------- components/input/style/index.ts | 1 + 5 files changed, 80 insertions(+), 74 deletions(-) diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 524961eb7d..8b2655029f 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -195,7 +195,7 @@ const Card = defineComponent({ actions && actions.length ?
    {getAction(actions)}
: null; return wrapSSR( -
+
{head} {coverDom} {children && children.length ? body : null} diff --git a/components/card/Grid.tsx b/components/card/Grid.tsx index bcbc8aa4f5..b6253c1bbd 100644 --- a/components/card/Grid.tsx +++ b/components/card/Grid.tsx @@ -21,7 +21,7 @@ export default defineComponent({ }; }); return () => { - return
{slots.default?.()}
; + return
{slots.default?.()}
; }; }, }); diff --git a/components/card/Meta.tsx b/components/card/Meta.tsx index 55b4bb06a9..129fb635d5 100644 --- a/components/card/Meta.tsx +++ b/components/card/Meta.tsx @@ -41,7 +41,7 @@ export default defineComponent({
) : null; return ( -
+
{avatarDom} {MetaDetail}
diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index a3721f55e6..b161d3d16e 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -4,8 +4,7 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import { resetComponent, clearFix } from '../../_style'; /** Component only token. Which will handle additional calculation of alias token */ -export interface ComponentToken { -} +export interface ComponentToken {} interface CardToken extends FullToken<'Card'> { cardHeadFontSize: string; CardHeadPadding: string; @@ -17,51 +16,61 @@ interface CardToken extends FullToken<'Card'> { cardHeadTabsMarginBottom: string; cardHeadHeight: string; cardShadow: string; - cardHeadFontSizeSm:string; - cardHeadColor:string; - gradientMin:string; - gradientMax:string; - cardInnerHeadPadding:string; - transitionTime:string; + cardHeadFontSizeSm: string; + cardHeadColor: string; + gradientMin: string; + gradientMax: string; + cardInnerHeadPadding: string; + transitionTime: string; } // ============================== Shared ============================== +export const genCardSmallStyle = (token: CardToken): CSSObject => { + + const { + cardPaddingBaseSm, + cardHeadHeightSm, + cardHeadPaddingSm, + cardHeadFontSizeSm, + componentCls, + } = token; + + return { + [`> ${componentCls}-head`]: { + minHeight: `${cardHeadHeightSm}`, + padding: `0 ${cardPaddingBaseSm}`, + fontSize: `${cardHeadFontSizeSm}px`, + [`> ${componentCls}-head-wrapper`]: { + [`> ${componentCls}-head-title`]: { + padding: `${cardHeadPaddingSm} 0`, + }, + [`> ${componentCls}-head-extra`]: { + padding: `${cardHeadPaddingSm} 0`, + fontSize: `${cardHeadFontSizeSm}px`, + }, + }, + }, + [`> ${componentCls}-body`]: { + padding: `${cardPaddingBaseSm}`, + }, + }; +}; + const genSharedCardStyle: GenerateStyle = (token): CSSObject => { - const { + const { cardHeadFontSize, CardHeadPadding, cardPaddingBase, - cardPaddingBaseSm, - cardHeadHeightSm, cardHeadPaddingSm, cardActionsLiMargin, - cardHeadFontSizeSm, cardHeadTabsMarginBottom, cardHeadHeight, componentCls, cardHeadColor, cardShadow, - transitionTime + transitionTime, + antCls } = token; return { - [`${componentCls}-small`]:{ - [` > ${componentCls}-head`]:{ - minHeight: `${cardHeadHeightSm}`, - padding: `0 ${cardPaddingBaseSm}`, - fontSize: `${cardHeadFontSizeSm}`, - [`> ${componentCls}-head-wrapper`]: { - [`> ${componentCls}-head-title`]: { - padding:`${cardHeadPaddingSm} 0`, - }, - [`> ${componentCls}-head-extra`]:{ - padding:`${cardHeadPaddingSm} 0`, - fontSize: `${cardHeadFontSizeSm}`, - } - } - }, - [`> ${componentCls}-body`]:{ - padding: `${cardPaddingBaseSm}` - } - }, [componentCls]: { ...resetComponent(token), position: `relative`, @@ -70,7 +79,10 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { '&-bordered': { border: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, }, - [`${componentCls}-rtl`]: { + [`&${componentCls}-small`]: { + ...genCardSmallStyle(token), + }, + [`&-rtl`]: { direction: 'rtl', }, [`&-hoverable`]: { @@ -78,8 +90,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { transition: ` box-shadow ${transitionTime}, border-color ${transitionTime}`, '&:hover': { borderColor: `${token.colorBgBase}`, - boxShadow: `${cardShadow}` - + boxShadow: `${cardShadow}`, }, }, [`${componentCls}-head`]: { @@ -87,7 +98,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { marginBottom: `-1px`, overflow: 'hidden', whiteSpace: 'nowrap', - color:`${cardHeadColor}`, + color: `${cardHeadColor}`, textOverflow: 'ellipsis', padding: ` 0 ${token.cardPaddingBase} `, fontWeight: 500, @@ -106,23 +117,21 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { overflow: 'hidden', whiteSpace: 'nowrap', textOverflow: 'ellipsis', - [`> ${componentCls}-typography ${componentCls}-typography-edit-content `]: { + [`> ${antCls}-typography ${antCls}-typography-edit-content `]: { left: 0, marginTop: 0, marginBottom: 0, }, }, - [`${componentCls}-prefix-tabs-top`]: { + [`${antCls}-tabs-top`]: { clear: 'both', marginBottom: `${cardHeadTabsMarginBottom}`, color: `${token.colorText}`, - // fontWeight: 'normal', fontWeight: 400, fontSize: `${token.fontSize}`, '&-bar': { borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, - }, }, }, @@ -146,6 +155,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-contain-grid:not(${componentCls}-loading) ${componentCls}-body`]: { margin: ' -1px 0 0 -1px', padding: 0, + color:'red' }, [`${componentCls}-grid`]: { float: 'left', @@ -169,7 +179,6 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { }, }, }, - [` ${componentCls}-contain-tabs > ${componentCls}-head ${componentCls}-head-title`]: { minHeight: ` ${cardHeadHeight}- ${cardPaddingBase}`, paddingBottom: 0, @@ -193,7 +202,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { }, }, - [`${componentCls}-actions`]: { + [`${componentCls}-actions`]: { margin: 0, padding: 0, listStyle: 'none', @@ -222,12 +231,12 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { transition: `color ${transitionTime}`, }, - [`a:not(${componentCls}-btn), >${token.iconCls}-css-prefix}`]: { + [`a:not(${antCls}-btn), >${token.iconCls}-css-prefix}`]: { display: ' inline-block', width: '100%', color: `${token.colorTextSecondary}`, lineHeight: ' 22px', - transition: `color ${transitionTime}`, + transition: `color ${transitionTime}`, '&:hover': { color: `${token.colorPrimary}`, @@ -240,16 +249,16 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { }, }, - [`li:not(:last-child)`]: { + [`li:not(:last-child)`]: { borderRight: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, - [` ${componentCls}-rtl &`]: { + [`${componentCls}-rtl &`]: { borderRight: 'none', borderLeft: `${token.lineWidth}px ${token.lineType} ${token.colorBorderSecondary}`, }, }, }, }, - [`${componentCls}-type-inner ${componentCls}-head`]: { + [`${componentCls}-type-inner ${componentCls}-head`]: { padding: `0 ${cardPaddingBase}`, background: `${token.colorBgBase}`, ' &-title': { @@ -263,7 +272,7 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { ' &-type-inner &-extra': { padding: `${token.cardInnerHeadPadding} + 1.5px 0`, }, - [`${componentCls}-meta`]: { + [`${componentCls}-meta`]: { margin: ' -4px 0', ...clearFix(), @@ -301,37 +310,35 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { [` ${componentCls}-loading`]: { overflow: 'hidden', }, - [` ${componentCls}-loading ${componentCls}-body`]: { + [` ${componentCls}-loading ${componentCls}-body`]: { userSelect: 'none', }, - [` ${componentCls}-loading-content`]: { + [` ${componentCls}-loading-content`]: { p: { margin: 0, }, }, - [` ${componentCls}-loading-block`]: { + [` ${componentCls}-loading-block`]: { height: '14px', margin: ' 4px 0', background: `linear-gradient(90deg,${token.gradientMin},${token.gradientMax}, ${token.gradientMin})`, backgroundSize: '600% 600%', borderRadius: `${token.borderRadiusXS}px`, - animationName:"card-loading", - animationDuration:'1.4s', - animationTimingFunction:'ease', - animationIterationCount:'infinite' + animationName: 'card-loading', + animationDuration: '1.4s', + animationTimingFunction: 'ease', + animationIterationCount: 'infinite', }, - '@keyframes card-loading': { - '0%,100% ':{ + '@keyframes card-loading': { + '0%,100% ': { backgroundPosition: '0 50%', }, - '50%':{ + '50%': { backgroundPosition: '100% 50%', - } - } + }, + }, }, - - }; }; @@ -350,17 +357,15 @@ export default genComponentStyleHook( cardHeadPaddingSm: '6px', cardActionsLiMargin: '12px 0', cardHeadTabsMarginBottom: '-17px', - cardShadow:`0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), + cardShadow: `0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09)`, - cardHeadColor:' fade(@black, 85%)', - gradientMin: 'rgba(207,216,220,.2)', - gradientMax:'rgba(207,216,220,.4)', - cardInnerHeadPadding:'12px', - transitionTime:'0.3s', + cardHeadColor: 'rgba(0,0,0,.85)', + gradientMin: 'rgba(207,216,220,.2)', + gradientMax: 'rgba(207,216,220,.4)', + cardInnerHeadPadding: '12px', + transitionTime: '0.3s', }); return [genSharedCardStyle(cardToken)]; }, - { - sizePaddingEdgeHorizontal: 0, - }, + {}, ); diff --git a/components/input/style/index.ts b/components/input/style/index.ts index dd011183d4..41a0e718d7 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -904,6 +904,7 @@ const genTextAreaStyle: GenerateStyle = token => { [`> ${componentCls}`]: { height: '100%', }, + '&::after': { color: token.colorTextDescription, whiteSpace: 'nowrap', From 70e8e043d3cbed9a23f5e0c194dd86c797316627 Mon Sep 17 00:00:00 2001 From: yang <2636098325@qq.com> Date: Mon, 13 Feb 2023 11:25:47 +0800 Subject: [PATCH 9/9] adjustment css --- components/card/style/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index b161d3d16e..5fa85c4508 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -152,16 +152,15 @@ const genSharedCardStyle: GenerateStyle = (token): CSSObject => { padding: `${cardPaddingBase}`, ...clearFix(), }, - [`${componentCls}-contain-grid:not(${componentCls}-loading) ${componentCls}-body`]: { + [`${componentCls}-contain-grid:not(&-loading) ${componentCls}-body`]: { margin: ' -1px 0 0 -1px', padding: 0, - color:'red' }, [`${componentCls}-grid`]: { float: 'left', width: '33.33%', padding: `${cardPaddingBase}`, - border: 0, + border: 'none', borderRadius: 0, boxShadow: `1px 0 0 0 ${token.colorSplit}, 0 1px 0 0 ${token.colorSplit}, 1px 1px 0 0 ${token.colorSplit}, 1px 0 0 0 ${token.colorSplit} inset,