fix(badge): fix the style issue in RTL mode (#38829)

* chore: update style

* docs(badge): add debug demo

* test: update snapshot

* test: offset solution

ref: #38828

* chore: update style

* Revert "test: offset solution"

This reverts commit aacf9c3.

* Revert "docs(badge): add debug demo"

This reverts commit 52b0dab.

* test: update snapshot

components/badge/style/index.tsx

@@ -276,6 +276,15 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         },
         [`${numberPrefixCls}-symbol`]: { verticalAlign: 'top' },
       },
+
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl',
+
+        [`${componentCls}-count, ${componentCls}-dot, ${numberPrefixCls}-custom-component`]: {
+          insetInlineEnd: 'auto',
+        },
+      },
     },
     [`${ribbonWrapperPrefixCls}`]: { position: 'relative' },
     [`${ribbonPrefixCls}`]: {
@@ -307,17 +316,24 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
         borderEndEndRadius: 0,
         [`${ribbonPrefixCls}-corner`]: {
           insetInlineEnd: 0,
-          borderColor: 'currentcolor transparent transparent currentcolor',
+          borderInlineEndColor: 'transparent',
+          borderBlockEndColor: 'transparent',
         },
       },
       [`&${ribbonPrefixCls}-placement-start`]: {
         insetInlineStart: -badgeRibbonOffset,
         borderEndStartRadius: 0,
         [`${ribbonPrefixCls}-corner`]: {
           insetInlineStart: 0,
-          borderColor: 'currentcolor currentcolor transparent transparent',
+          borderBlockEndColor: 'transparent',
+          borderInlineStartColor: 'transparent',
         },
       },
+
+      // ====================== RTL =======================
+      '&-rtl': {
+        direction: 'rtl',
+      },
     },
   };
 };