vueComponent · shu-hari · Apr 28, 2025 · Apr 28, 2025
diff --git a/components/avatar/Avatar.tsx b/components/avatar/Avatar.tsx
@@ -12,6 +12,7 @@ import ResizeObserver from '../vc-resize-observer';
 import eagerComputed from '../_util/eagerComputed';
 import useStyle from './style';
 import { useAvatarInjectContext } from './AvatarContext';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 
 export type AvatarSize = 'large' | 'small' | 'default' | number | ScreenSizeMap;
 
@@ -55,7 +56,8 @@ const Avatar = defineComponent({
     const avatarNodeRef = shallowRef<HTMLElement>(null);
 
     const { prefixCls } = useConfigInject('avatar', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const avatarCtx = useAvatarInjectContext();
     const size = computed(() => {
       return props.size === 'default' ? avatarCtx.size : props.size;
@@ -146,6 +148,8 @@ const Avatar = defineComponent({
         [`${pre}-${mergeShape}`]: true,
         [`${pre}-image`]: src && isImgExist.value,
         [`${pre}-icon`]: icon,
+        [cssVarCls.value]: true,
+        [rootCls.value]: true,
         [hashId.value]: true,
       };
 
@@ -175,7 +179,7 @@ const Avatar = defineComponent({
       } else if (icon) {
         childrenToRender = icon;
       } else if (isMounted.value || scale.value !== 1) {
-        const transformString = `scale(${scale.value}) translateX(-50%)`;
+        const transformString = `scale(${scale.value})`;
         const childrenStyle: CSSProperties = {
           msTransform: transformString,
           WebkitTransform: transformString,

diff --git a/components/avatar/Group.tsx b/components/avatar/Group.tsx
@@ -6,6 +6,7 @@ import type { PropType, ExtractPropTypes, CSSProperties } from 'vue';
 import { computed, defineComponent, watchEffect } from 'vue';
 import { flattenChildren, getPropsSlot } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 import useStyle from './style';
 import { useAvatarProviderContext } from './AvatarContext';
 
@@ -36,7 +37,8 @@ const Group = defineComponent({
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('avatar', props);
     const groupPrefixCls = computed(() => `${prefixCls.value}-group`);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     watchEffect(() => {
       const context = { size: props.size, shape: props.shape };
       useAvatarProviderContext(context);
@@ -54,6 +56,8 @@ const Group = defineComponent({
         [groupPrefixCls.value]: true,
         [`${groupPrefixCls.value}-rtl`]: direction.value === 'rtl',
         [`${attrs.class}`]: !!attrs.class,
+        [cssVarCls.value]: true,
+        [rootCls.value]: true,
         [hashId.value]: true,
       };
 

diff --git a/components/avatar/style/index.ts b/components/avatar/style/index.ts
@@ -1,12 +1,14 @@
+import { unit } from '../../_util/cssinjs';
 import type { CSSObject } from '../../_util/cssinjs';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
-import { genComponentStyleHook, mergeToken } from '../../theme/internal';
+
 import { resetComponent } from '../../style';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
+import { genStyleHooks, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
   /**
-   * @desc 头像背景色
-   * @descEN Background color of Avatar
+   * @desc 头像尺寸
+   * @descEN Size of Avatar
    */
   containerSize: number;
   /**
@@ -51,10 +53,14 @@ export interface ComponentToken {
   groupBorderColor: string;
 }
 
+/**
+ * @desc Avatar 组件的 Token
+ * @descEN Token for Avatar component
+ */
 type AvatarToken = FullToken<'Avatar'> & {
+  avatarBgColor: string;
   avatarBg: string;
   avatarColor: string;
-  avatarBgColor: string;
 };
 
 const genBaseStyle: GenerateStyle<AvatarToken> = token => {
@@ -81,22 +87,12 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
   const avatarSizeStyle = (size: number, fontSize: number, radius: number): CSSObject => ({
     width: size,
     height: size,
-    lineHeight: `${size - lineWidth * 2}px`,
     borderRadius: '50%',
 
     [`&${componentCls}-square`]: {
       borderRadius: radius,
     },
 
-    [`${componentCls}-string`]: {
-      position: 'absolute',
-      left: {
-        _skip_check_: true,
-        value: '50%',
-      },
-      transformOrigin: '0 center',
-    },
-
     [`&${componentCls}-icon`]: {
       fontSize,
       [`> ${iconCls}`]: {
@@ -109,16 +105,18 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
     [componentCls]: {
       ...resetComponent(token),
       position: 'relative',
-      display: 'inline-block',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
       overflow: 'hidden',
       color: avatarColor,
       whiteSpace: 'nowrap',
       textAlign: 'center',
       verticalAlign: 'middle',
       background: avatarBg,
-      border: `${lineWidth}px ${lineType} transparent`,
+      border: `${unit(lineWidth)} ${lineType} transparent`,
 
-      [`&-image`]: {
+      '&-image': {
         background: 'transparent',
       },
 
@@ -128,11 +126,11 @@ const genBaseStyle: GenerateStyle<AvatarToken> = token => {
 
       ...avatarSizeStyle(containerSize, textFontSize, borderRadius),
 
-      [`&-lg`]: {
+      '&-lg': {
         ...avatarSizeStyle(containerSizeLG, textFontSizeLG, borderRadiusLG),
       },
 
-      [`&-sm`]: {
+      '&-sm': {
         ...avatarSizeStyle(containerSizeSM, textFontSizeSM, borderRadiusSM),
       },
 
@@ -153,11 +151,11 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
     [`${componentCls}-group`]: {
       display: 'inline-flex',
 
-      [`${componentCls}`]: {
+      [componentCls]: {
         borderColor: groupBorderColor,
       },
 
-      [`> *:not(:first-child)`]: {
+      '> *:not(:first-child)': {
         marginInlineStart: groupOverlapping,
       },
     },
@@ -169,7 +167,33 @@ const genGroupStyle: GenerateStyle<AvatarToken> = token => {
   };
 };
 
-export default genComponentStyleHook(
+export const prepareComponentToken: GetDefaultToken<'Avatar'> = token => {
+  const {
+    controlHeight,
+    controlHeightLG,
+    controlHeightSM,
+    fontSize,
+    fontSizeLG,
+    fontSizeXL,
+    fontSizeHeading3,
+    marginXS,
+    marginXXS,
+    colorBorderBg,
+  } = token;
+  return {
+    containerSize: controlHeight,
+    containerSizeLG: controlHeightLG,
+    containerSizeSM: controlHeightSM,
+    textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
+    textFontSizeLG: fontSizeHeading3,
+    textFontSizeSM: fontSize,
+    groupSpace: marginXXS,
+    groupOverlapping: -marginXS,
+    groupBorderColor: colorBorderBg,
+  };
+};
+
+export default genStyleHooks(
   'Avatar',
   token => {
     const { colorTextLightSolid, colorTextPlaceholder } = token;
@@ -179,33 +203,5 @@ export default genComponentStyleHook(
     });
     return [genBaseStyle(avatarToken), genGroupStyle(avatarToken)];
   },
-  token => {
-    const {
-      controlHeight,
-      controlHeightLG,
-      controlHeightSM,
-
-      fontSize,
-      fontSizeLG,
-      fontSizeXL,
-      fontSizeHeading3,
-
-      marginXS,
-      marginXXS,
-      colorBorderBg,
-    } = token;
-    return {
-      containerSize: controlHeight,
-      containerSizeLG: controlHeightLG,
-      containerSizeSM: controlHeightSM,
-
-      textFontSize: Math.round((fontSizeLG + fontSizeXL) / 2),
-      textFontSizeLG: fontSizeHeading3,
-      textFontSizeSM: fontSize,
-
-      groupSpace: marginXXS,
-      groupOverlapping: -marginXS,
-      groupBorderColor: colorBorderBg,
-    };
-  },
+  prepareComponentToken,
 );
diff --git a/components/badge/Badge.tsx b/components/badge/Badge.tsx
@@ -9,6 +9,7 @@ import { defineComponent, computed, ref, watch, Transition } from 'vue';
 import Ribbon from './Ribbon';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 import isNumeric from '../_util/isNumeric';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
 import useStyle from './style';
 import type { PresetColorKey } from '../theme/interface';
 import type { LiteralUnion, CustomSlotsType } from '../_util/type';
@@ -49,7 +50,8 @@ export default defineComponent({
   }>,
   setup(props, { slots, attrs }) {
     const { prefixCls, direction } = useConfigInject('badge', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
 
     // ================================ Misc ================================
     const numberedDisplayCount = computed(() => {
@@ -189,6 +191,8 @@ export default defineComponent({
           [`${pre}-rtl`]: direction.value === 'rtl',
         },
         attrs.class,
+        cssVarCls.value,
+        rootCls.value,
         hashId.value,
       );
 

diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -1,6 +1,7 @@
 import type { CustomSlotsType, LiteralUnion } from '../_util/type';
 import type { PresetColorType } from '../_util/colors';
-import useStyle from './style';
+import useCSSVarCls from '../config-provider/hooks/useCssVarCls';
+import useStyle from './style/ribbon';
 import { isPresetColor } from '../_util/colors';
 import type { CSSProperties, PropType, ExtractPropTypes } from 'vue';
 import { defineComponent, computed } from 'vue';
@@ -27,7 +28,8 @@ export default defineComponent({
   }>,
   setup(props, { attrs, slots }) {
     const { prefixCls, direction } = useConfigInject('ribbon', props);
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const rootCls = useCSSVarCls(prefixCls);
+    const [wrapSSR, hashId, cssVarCls] = useStyle(prefixCls, rootCls);
     const colorInPreset = computed(() => isPresetColor(props.color, false));
     const ribbonCls = computed(() => [
       prefixCls.value,
@@ -46,7 +48,10 @@ export default defineComponent({
         cornerColorStyle.color = props.color;
       }
       return wrapSSR(
-        <div class={`${prefixCls.value}-wrapper ${hashId.value}`} {...restAttrs}>
+        <div
+          class={`${prefixCls.value}-wrapper ${cssVarCls.value} ${rootCls.value} ${hashId.value}`}
+          {...restAttrs}
+        >
           {slots.default?.()}
           <div
             class={[ribbonCls.value, className, hashId.value]}