From 4ed2b5e082b4db9f2a14eaf2d4410c0eb1d0da5e Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 23 Dec 2025 16:25:28 +0800
Subject: [PATCH 1/8] feat(Badge): the shape attr add four optional values

---
 packages/components/badge/README.en-US.md |  4 +-
 packages/components/badge/README.md       |  2 +-
 packages/components/badge/badge.less      | 98 +++++++++++++++++++++--
 packages/components/badge/badge.ts        | 22 ++++-
 packages/components/badge/badge.wxml      | 12 +--
 packages/components/badge/badge.wxs       |  7 --
 packages/components/badge/props.ts        |  2 +-
 packages/components/badge/type.ts         | 12 ++-
 8 files changed, 134 insertions(+), 25 deletions(-)

diff --git a/packages/components/badge/README.en-US.md b/packages/components/badge/README.en-US.md
index e0473ac10..c33cdc8d6 100644
--- a/packages/components/badge/README.en-US.md
+++ b/packages/components/badge/README.en-US.md
@@ -13,8 +13,8 @@ content | String | - | \- | N
 count | String / Number | 0 | \- | N
 dot | Boolean | false | \- | N
 max-count | Number | 99 | \- | N
-offset | Array | - | Typescript：`Array<string \| number>` | N
-shape | String | circle | options: circle/square/bubble/ribbon | N
+offset | Array | - | Typescript: `Array<string \| number>` | N
+shape | String | circle | options: circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | \- | N
 size | String | medium | options: medium/large | N
 
diff --git a/packages/components/badge/README.md b/packages/components/badge/README.md
index a9befb88b..d5a804a7f 100644
--- a/packages/components/badge/README.md
+++ b/packages/components/badge/README.md
@@ -55,7 +55,7 @@ count | String / Number | 0 | 徽标右上角内容。可以是数字，也可
 dot | Boolean | false | 是否为红点 | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
-shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
+shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等价。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 
diff --git a/packages/components/badge/badge.less b/packages/components/badge/badge.less
index d354057b0..c6b79bad0 100644
--- a/packages/components/badge/badge.less
+++ b/packages/components/badge/badge.less
@@ -49,21 +49,39 @@
     border-radius: calc(@badge-basic-height / 2);
   }
 
-  &__ribbon {
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right,
+  &__ribbon-left,
+  &__triangle-left {
     &-outer {
       position: absolute;
       top: 0;
+    }
+  }
+
+  &__ribbon,
+  &__ribbon-right,
+  &__triangle-right {
+    &-outer {
       right: 0;
     }
   }
 
-  &--ribbon {
+  &__ribbon-left,
+  &__triangle-left {
+    &-outer {
+      left: 0;
+    }
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--ribbon-left {
     position: relative;
     display: inline-block;
     transform-origin: center center;
-    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
     border-radius: 0;
-    // padding: 0;
 
     &::before,
     &::after {
@@ -87,10 +105,51 @@
     }
   }
 
+  &--ribbon,
+  &--ribbon-right {
+    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
+  }
+
+  &--ribbon-left {
+    transform: translate(calc(-50% + @badge-basic-height - 1rpx), calc(-50% + @badge-basic-height - 1rpx))
+      rotate(-45deg);
+  }
+
   &--bubble {
     border-radius: @border-bubble-border-radius;
   }
 
+  &--triangle-left,
+  &--triangle-right {
+    width: calc(@badge-basic-height * 2);
+    height: calc(@badge-basic-height * 2);
+    padding: 0;
+    position: absolute;
+    top: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+  }
+
+  &--triangle-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
+    right: 0;
+
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
+    }
+  }
+
+  &--triangle-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
+    left: 0;
+
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
+    }
+  }
+
   // size
   &--large {
     font: @badge-large-font;
@@ -103,17 +162,44 @@
     border-radius: calc(@badge-large-height / 2);
   }
 
-  &__content:not(:empty) + .t-has-count {
+  &--large&--triangle-right,
+  &--large&--triangle-left {
+    width: calc(@badge-large-height * 2);
+    height: calc(@badge-large-height * 2);
+  }
+
+  &__content:not(:empty) + &--ribbon.@{prefix}-has-count,
+  &__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
+  &__content:not(:empty) + &--ribbon-left.@{prefix}-has-count,
+  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
+  &__content:not(:empty) + &--circle.@{prefix}-has-count,
+  &__content:not(:empty) + &--square.@{prefix}-has-count {
     transform-origin: center center;
     transform: translate(-50%, -50%);
     position: absolute;
-    left: 100%;
     top: 0;
   }
 
+  &__content:not(:empty) + &--ribbon.@{prefix}-has-count,
+  &__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
+  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
+  &__content:not(:empty) + &--circle.@{prefix}-has-count,
+  &__content:not(:empty) + &--square.@{prefix}-has-count {
+    left: 100%;
+  }
+
+  &__content:not(:empty) + &--ribbon-left.@{prefix}-has-count {
+    right: 100%;
+  }
+
   &__content-text {
     display: block;
     font: @font-body-large;
     color: @badge-content-text-color;
   }
+
+  &__count {
+    display: inline-block;
+    font: @font-mark-extraSmall;
+  }
 }
diff --git a/packages/components/badge/badge.ts b/packages/components/badge/badge.ts
index 4189970ec..c12a1f1d2 100644
--- a/packages/components/badge/badge.ts
+++ b/packages/components/badge/badge.ts
@@ -2,7 +2,7 @@ import { SuperComponent, wxComponent } from '../common/src/index';
 import config from '../common/config';
 import props from './props';
 import type { TdBadgeProps } from './type';
-import { uniqueFactory } from '../common/utils';
+import { uniqueFactory, getRect } from '../common/utils';
 
 const { prefix } = config;
 const name = `${prefix}-badge`;
@@ -26,15 +26,35 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
+    hasActualContent: false,
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
       this.setData({
         labelID: `${uniqueID}_label`,
         descriptionID: `${uniqueID}_description`,
       });
+
+      if (target.includes(this.properties.shape)) {
+        this.checkForActualContent();
+      }
+    },
+  };
+
+  methods = {
+    checkForActualContent() {
+      if (this.properties.content) {
+        this.setData({ hasActualContent: true });
+        return;
+      }
+
+      return getRect(this, `.${name}__content`).then((rect) => {
+        const hasSlotContent = rect.width > 0 || rect.height > 0;
+        this.setData({ hasActualContent: hasSlotContent });
+      });
     },
   };
 }
diff --git a/packages/components/badge/badge.wxml b/packages/components/badge/badge.wxml
index da5e16828..6a460e62a 100644
--- a/packages/components/badge/badge.wxml
+++ b/packages/components/badge/badge.wxml
@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{_this.getBadgeOuterClass({classPrefix, shape})}} class {{prefix}}-class"
+  class="{{classPrefix}} {{ !hasActualContent? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"
@@ -28,9 +28,11 @@
     aria-hidden="true"
     aria-label="{{ ariaLabel || _.getBadgeAriaLabel({dot, count, maxCount}) }}"
   >
-    <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
-      {{ _this.getBadgeValue({dot, count, maxCount}) }}
-    </block>
-    <slot else name="count" />
+    <view class="{{classPrefix}}__count">
+      <block wx:if="{{_this.isShowBadge({dot,count,showZero})}}">
+        {{ _this.getBadgeValue({dot, count, maxCount}) }}
+      </block>
+      <slot else name="count" />
+    </view>
   </view>
 </view>
diff --git a/packages/components/badge/badge.wxs b/packages/components/badge/badge.wxs
index 369f83119..62d5c650f 100644
--- a/packages/components/badge/badge.wxs
+++ b/packages/components/badge/badge.wxs
@@ -35,12 +35,6 @@ var getBadgeStyles = function (props) {
   return styleStr;
 };
 
-var getBadgeOuterClass = function (props) {
-  var baseClass = props.classPrefix;
-  var classNames = [baseClass, props.shape === 'ribbon' ? baseClass + '__ribbon-outer' : ''];
-  return classNames.join(' ');
-};
-
 var getBadgeInnerClass = function (props) {
   var baseClass = props.classPrefix;
   var classNames = [
@@ -66,6 +60,5 @@ var isShowBadge = function (props) {
 
 module.exports.getBadgeValue = getBadgeValue;
 module.exports.getBadgeStyles = getBadgeStyles;
-module.exports.getBadgeOuterClass = getBadgeOuterClass;
 module.exports.getBadgeInnerClass = getBadgeInnerClass;
 module.exports.isShowBadge = isShowBadge;
diff --git a/packages/components/badge/props.ts b/packages/components/badge/props.ts
index bf7988856..ab0a7c790 100644
--- a/packages/components/badge/props.ts
+++ b/packages/components/badge/props.ts
@@ -35,7 +35,7 @@ const props: TdBadgeProps = {
   offset: {
     type: Array,
   },
-  /** 形状 */
+  /** 徽标形状，其中 ribbon 和 ribbon-right 等价 */
   shape: {
     type: String,
     value: 'circle',
diff --git a/packages/components/badge/type.ts b/packages/components/badge/type.ts
index 92ac9cdf0..b0ec5403f 100644
--- a/packages/components/badge/type.ts
+++ b/packages/components/badge/type.ts
@@ -53,12 +53,20 @@ export interface TdBadgeProps {
     value?: Array<string | number>;
   };
   /**
-   * 形状
+   * 徽标形状，其中 ribbon 和 ribbon-right 等价
    * @default circle
    */
   shape?: {
     type: StringConstructor;
-    value?: 'circle' | 'square' | 'bubble' | 'ribbon';
+    value?:
+      | 'circle'
+      | 'square'
+      | 'bubble'
+      | 'ribbon'
+      | 'ribbon-right'
+      | 'ribbon-left'
+      | 'triangle-right'
+      | 'triangle-left';
   };
   /**
    * 当数值为 0 时，是否展示徽标

From 7fd059d0f20b8077c56e8dff6a1e99765c38eeb4 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 23 Dec 2025 16:30:02 +0800
Subject: [PATCH 2/8] format: adjust font variable line breaks in _font.less

---
 .../components/common/style/theme/_font.less  | 27 +++++++------------
 1 file changed, 9 insertions(+), 18 deletions(-)

diff --git a/packages/components/common/style/theme/_font.less b/packages/components/common/style/theme/_font.less
index 3e0d0d7a1..c174909fc 100644
--- a/packages/components/common/style/theme/_font.less
+++ b/packages/components/common/style/theme/_font.less
@@ -51,32 +51,23 @@ page,
   --td-font-link-small: var(--td-font-size-link-small) / var(--td-line-height-link-small) var(--td-font-family);
   --td-font-link-medium: var(--td-font-size-link-medium) / var(--td-line-height-link-medium) var(--td-font-family);
   --td-font-link-large: var(--td-font-size-link-large) / var(--td-line-height-link-large) var(--td-font-family);
-  --td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall)
-    var(--td-font-family);
+  --td-font-mark-extraSmall: 600 var(--td-font-size-mark-extraSmall) / var(--td-line-height-mark-extraSmall) var(--td-font-family);
   --td-font-mark-small: 600 var(--td-font-size-mark-small) / var(--td-line-height-mark-small) var(--td-font-family);
   --td-font-mark-medium: 600 var(--td-font-size-mark-medium) / var(--td-line-height-mark-medium) var(--td-font-family);
   --td-font-mark-large: 600 var(--td-font-size-mark-large) / var(--td-line-height-mark-large) var(--td-font-family);
-  --td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall)
-    var(--td-font-family);
+  --td-font-body-extraSmall: var(--td-font-size-body-extraSmall) / var(--td-line-height-body-extraSmall) var(--td-font-family);
   --td-font-body-small: var(--td-font-size-body-small) / var(--td-line-height-body-small) var(--td-font-family);
   --td-font-body-medium: var(--td-font-size-body-medium) / var(--td-line-height-body-medium) var(--td-font-family);
   --td-font-body-large: var(--td-font-size-body-large) / var(--td-line-height-body-large) var(--td-font-family);
   --td-font-title-small: 600 var(--td-font-size-title-small) / var(--td-line-height-title-small) var(--td-font-family);
-  --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium)
-    var(--td-font-family);
+  --td-font-title-medium: 600 var(--td-font-size-title-medium) / var(--td-line-height-title-medium) var(--td-font-family);
   --td-font-title-large: 600 var(--td-font-size-title-large) / var(--td-line-height-title-large) var(--td-font-family);
-  --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge)
-    var(--td-font-family);
-  --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small)
-    var(--td-font-family);
-  --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium)
-    var(--td-font-family);
-  --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large)
-    var(--td-font-family);
-  --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium)
-    var(--td-font-family);
-  --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large)
-    var(--td-font-family);
+  --td-font-title-extraLarge: 600 var(--td-font-size-title-extraLarge) / var(--td-line-height-title-extraLarge) var(--td-font-family);
+  --td-font-headline-small: 600 var(--td-font-size-headline-small) / var(--td-line-height-headline-small) var(--td-font-family);
+  --td-font-headline-medium: 600 var(--td-font-size-headline-medium) / var(--td-line-height-headline-medium) var(--td-font-family);
+  --td-font-headline-large: 600 var(--td-font-size-headline-large) / var(--td-line-height-headline-large) var(--td-font-family);
+  --td-font-display-medium: 600 var(--td-font-size-display-medium) / var(--td-line-height-display-medium) var(--td-font-family);
+  --td-font-display-large: 600 var(--td-font-size-display-large) / var(--td-line-height-display-large) var(--td-font-family);
 
   // 字体大小 token
   --td-font-size: 20rpx;

From c7483f17e11c43505bc192241255a2ccd8436a13 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Tue, 23 Dec 2025 16:32:07 +0800
Subject: [PATCH 3/8] feat(Badge): update demo

---
 .../__test__/__snapshots__/demo.test.js.snap  | 22 +++++++++++++++++++
 .../badge/_example/theme/index.wxml           |  7 +++++-
 packages/components/badge/badge.ts            | 15 ++++++-------
 packages/components/badge/badge.wxml          |  2 +-
 4 files changed, 36 insertions(+), 10 deletions(-)

diff --git a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
index 27dbb501b..1e07440be 100644
--- a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
@@ -267,5 +267,27 @@ exports[`Badge Badge theme demo works fine 1`] = `
       slot="note"
     />
   </t-cell>
+  <wx-view
+    class="demo-desc"
+    style="margin-bottom: 32rpx"
+  >
+    三角角标
+  </wx-view>
+  <t-cell
+    tClass="t-class-cell"
+    title="单行标题"
+  >
+    <t-badge
+      count="New"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-right"
+      slot="note"
+    />
+  </t-cell>
 </theme>
 `;
diff --git a/packages/components/badge/_example/theme/index.wxml b/packages/components/badge/_example/theme/index.wxml
index 35f442038..94278f158 100644
--- a/packages/components/badge/_example/theme/index.wxml
+++ b/packages/components/badge/_example/theme/index.wxml
@@ -28,5 +28,10 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-16rpx', '-56rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+  <t-badge count="New" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+</t-cell>
+
+<view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
+<t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="New" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>
diff --git a/packages/components/badge/badge.ts b/packages/components/badge/badge.ts
index c12a1f1d2..4c2855010 100644
--- a/packages/components/badge/badge.ts
+++ b/packages/components/badge/badge.ts
@@ -26,34 +26,33 @@ export default class Badge extends SuperComponent {
     value: '',
     labelID: '',
     descriptionID: '',
-    hasActualContent: false,
+    useOuterClass: false,
   };
 
   lifetimes = {
     ready() {
       const uniqueID = getUniqueID();
-      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+
       this.setData({
         labelID: `${uniqueID}_label`,
         descriptionID: `${uniqueID}_description`,
       });
 
-      if (target.includes(this.properties.shape)) {
-        this.checkForActualContent();
-      }
+      this.checkForActualContent();
     },
   };
 
   methods = {
     checkForActualContent() {
-      if (this.properties.content) {
-        this.setData({ hasActualContent: true });
+      const target = ['ribbon', 'ribbon-right', 'ribbon-left', 'triangle-right', 'triangle-left'];
+      if (this.properties.content || !target.includes(this.properties.shape)) {
+        this.setData({ useOuterClass: false });
         return;
       }
 
       return getRect(this, `.${name}__content`).then((rect) => {
         const hasSlotContent = rect.width > 0 || rect.height > 0;
-        this.setData({ hasActualContent: hasSlotContent });
+        this.setData({ useOuterClass: !hasSlotContent });
       });
     },
   };
diff --git a/packages/components/badge/badge.wxml b/packages/components/badge/badge.wxml
index 6a460e62a..ced2f25af 100644
--- a/packages/components/badge/badge.wxml
+++ b/packages/components/badge/badge.wxml
@@ -9,7 +9,7 @@
 
 <view
   style="{{_._style([style, customStyle])}}"
-  class="{{classPrefix}} {{ !hasActualContent? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
+  class="{{classPrefix}} {{ useOuterClass? classPrefix + '__' + shape + '-outer': '' }} class {{prefix}}-class"
   aria-labelledby="{{labelID}}"
   aria-describedby="{{descriptionID}}"
   aria-role="{{ ariaRole || 'option'}}"

From e450f16f29c2005d8ef0dd19c6b8e4ccbc097fd1 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 24 Dec 2025 00:35:53 +0800
Subject: [PATCH 4/8] fix: fix cr

---
 packages/components/badge/badge.less                      | 5 +++--
 .../tabs/__test__/__snapshots__/demo.test.js.snap         | 8 ++++----
 packages/components/tabs/_example/with-badge/index.wxml   | 4 ++--
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/components/badge/badge.less b/packages/components/badge/badge.less
index c6b79bad0..3033d1b6e 100644
--- a/packages/components/badge/badge.less
+++ b/packages/components/badge/badge.less
@@ -199,7 +199,8 @@
   }
 
   &__count {
-    display: inline-block;
-    font: @font-mark-extraSmall;
+    &:empty {
+      display: none;
+    }
   }
 }
diff --git a/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap b/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
index 7fcde9d9c..9e8b4c6ff 100644
--- a/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/tabs/__test__/__snapshots__/demo.test.js.snap
@@ -273,8 +273,8 @@ exports[`Tabs Tabs with-badge demo works fine 1`] = `
         Object {
           "dot": true,
           "offset": Array [
-            "4px",
-            "4px",
+            0,
+            1,
           ],
         }
       }}"
@@ -286,8 +286,8 @@ exports[`Tabs Tabs with-badge demo works fine 1`] = `
         Object {
           "count": 8,
           "offset": Array [
-            "8px",
-            "8px",
+            0,
+            1,
           ],
         }
       }}"
diff --git a/packages/components/tabs/_example/with-badge/index.wxml b/packages/components/tabs/_example/with-badge/index.wxml
index 9132c2652..8007ae52b 100644
--- a/packages/components/tabs/_example/with-badge/index.wxml
+++ b/packages/components/tabs/_example/with-badge/index.wxml
@@ -1,5 +1,5 @@
 <t-tabs defaultValue="{{0}}">
-  <t-tab-panel label="选项" value="0" badge-props="{{ { dot: true, offset: ['4px', '4px'] } }}" />
-  <t-tab-panel label="选项" value="1" badge-props="{{ { count: 8, offset: ['8px', '8px'] } }}" />
+  <t-tab-panel label="选项" value="0" badge-props="{{ { dot: true, offset: [0, 1] } }}" />
+  <t-tab-panel label="选项" value="1" badge-props="{{ { count: 8, offset: [0, 1] } }}" />
   <t-tab-panel label="选项" value="2" />
 </t-tabs>

From 3628f9279e5f1efced5cb1b2ce2f6aa217daaa64 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 24 Dec 2025 09:12:05 +0800
Subject: [PATCH 5/8] docs: regenerate api docs

---
 packages/components/badge/README.md | 2 +-
 packages/components/badge/props.ts  | 2 +-
 packages/components/badge/type.ts   | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/badge/README.md b/packages/components/badge/README.md
index d5a804a7f..e77382fcd 100644
--- a/packages/components/badge/README.md
+++ b/packages/components/badge/README.md
@@ -55,7 +55,7 @@ count | String / Number | 0 | 徽标右上角内容。可以是数字，也可
 dot | Boolean | false | 是否为红点 | N
 max-count | Number | 99 | 封顶的数字值 | N
 offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['10em', '8rem']。TS 类型：`Array<string \| number>` | N
-shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等价。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
+shape | String | circle | 徽标形状，其中 ribbon 和 ribbon-right 等效。可选项：circle/square/bubble/ribbon/ribbon-right/ribbon-left/triangle-right/triangle-left | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
 
diff --git a/packages/components/badge/props.ts b/packages/components/badge/props.ts
index ab0a7c790..866f17b7a 100644
--- a/packages/components/badge/props.ts
+++ b/packages/components/badge/props.ts
@@ -35,7 +35,7 @@ const props: TdBadgeProps = {
   offset: {
     type: Array,
   },
-  /** 徽标形状，其中 ribbon 和 ribbon-right 等价 */
+  /** 徽标形状，其中 ribbon 和 ribbon-right 等效 */
   shape: {
     type: String,
     value: 'circle',
diff --git a/packages/components/badge/type.ts b/packages/components/badge/type.ts
index b0ec5403f..f5b307ae6 100644
--- a/packages/components/badge/type.ts
+++ b/packages/components/badge/type.ts
@@ -53,7 +53,7 @@ export interface TdBadgeProps {
     value?: Array<string | number>;
   };
   /**
-   * 徽标形状，其中 ribbon 和 ribbon-right 等价
+   * 徽标形状，其中 ribbon 和 ribbon-right 等效
    * @default circle
    */
   shape?: {

From 0f3fcd999be77b351f6a1174c4405579a2573a1a Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 24 Dec 2025 11:11:15 +0800
Subject: [PATCH 6/8] fix: fix demo

---
 .../components/badge/__test__/__snapshots__/demo.test.js.snap   | 2 +-
 packages/components/badge/_example/size/index.wxml              | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
index 1e07440be..6cba8174d 100644
--- a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
@@ -152,7 +152,7 @@ exports[`Badge Badge size demo works fine 1`] = `
   <wx-view
     class="demo-desc"
   >
-    Middle
+    Medium
   </wx-view>
   <wx-view
     class="block"
diff --git a/packages/components/badge/_example/size/index.wxml b/packages/components/badge/_example/size/index.wxml
index 753a18237..27907f629 100644
--- a/packages/components/badge/_example/size/index.wxml
+++ b/packages/components/badge/_example/size/index.wxml
@@ -4,7 +4,7 @@
   <t-avatar icon="user" size="large" badge-props="{{ {count: 8, size: 'large', offset: [7, 7]} }}" />
 </view>
 
-<view class="demo-desc">Middle</view>
+<view class="demo-desc">Medium</view>
 
 <view class="block">
   <t-avatar icon="user" badge-props="{{ {count: 8, offset: [5, 5]} }}" />

From 46ad39874912d9499f9d07a5930979af66f9ec2a Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Wed, 24 Dec 2025 13:41:06 +0800
Subject: [PATCH 7/8] chore(Badge): optimze ribbon badge

---
 .../__test__/__snapshots__/demo.test.js.snap  |  4 +-
 .../badge/_example/theme/index.wxml           |  4 +-
 packages/components/badge/badge.less          | 98 ++++++++-----------
 3 files changed, 46 insertions(+), 60 deletions(-)

diff --git a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
index 6cba8174d..ac3d0b739 100644
--- a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
@@ -256,7 +256,7 @@ exports[`Badge Badge theme demo works fine 1`] = `
     title="单行标题"
   >
     <t-badge
-      count="New"
+      count="NEW"
       offset="{{
         Array [
           0,
@@ -278,7 +278,7 @@ exports[`Badge Badge theme demo works fine 1`] = `
     title="单行标题"
   >
     <t-badge
-      count="New"
+      count="NEW"
       offset="{{
         Array [
           0,
diff --git a/packages/components/badge/_example/theme/index.wxml b/packages/components/badge/_example/theme/index.wxml
index 94278f158..013e29976 100644
--- a/packages/components/badge/_example/theme/index.wxml
+++ b/packages/components/badge/_example/theme/index.wxml
@@ -28,10 +28,10 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
 </t-cell>
 
 <view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
-  <t-badge count="New" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>
diff --git a/packages/components/badge/badge.less b/packages/components/badge/badge.less
index 3033d1b6e..37fb2a81f 100644
--- a/packages/components/badge/badge.less
+++ b/packages/components/badge/badge.less
@@ -75,54 +75,18 @@
     }
   }
 
-  &--ribbon,
-  &--ribbon-right,
-  &--ribbon-left {
-    position: relative;
-    display: inline-block;
-    transform-origin: center center;
-    border-radius: 0;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      bottom: 0;
-      border-bottom: @badge-basic-height solid @badge-color;
-      font-size: 0;
-    }
-
-    &::before {
-      left: calc(-1 * @badge-basic-height + 1rpx);
-      border-left: @badge-basic-height solid transparent;
-    }
-
-    &::after {
-      right: calc(-1 * @badge-basic-height + 1rpx);
-      border-right: @badge-basic-height solid transparent;
-    }
-  }
-
-  &--ribbon,
-  &--ribbon-right {
-    transform: translate(calc(50% - @badge-basic-height + 1rpx), calc(-50% + @badge-basic-height - 1rpx)) rotate(45deg);
-  }
-
-  &--ribbon-left {
-    transform: translate(calc(-50% + @badge-basic-height - 1rpx), calc(-50% + @badge-basic-height - 1rpx))
-      rotate(-45deg);
-  }
-
   &--bubble {
     border-radius: @border-bubble-border-radius;
   }
 
+  &--ribbon,
+  &--ribbon-right,
+  &--ribbon-left,
   &--triangle-left,
   &--triangle-right {
     width: calc(@badge-basic-height * 2);
     height: calc(@badge-basic-height * 2);
+    border-radius: 0;
     padding: 0;
     position: absolute;
     top: 0;
@@ -132,21 +96,39 @@
     overflow: hidden;
   }
 
+  &--ribbon,
+  &--ribbon-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 82%, transparent 82%);
+  }
+
   &--triangle-right {
     background: linear-gradient(45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--triangle-right {
     right: 0;
 
     .@{prefix}-badge__count {
-      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 2rpx));
     }
   }
 
+  &--ribbon-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 82%, transparent 82%);
+  }
+
   &--triangle-left {
     background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon-left,
+  &--triangle-left {
     left: 0;
 
     .@{prefix}-badge__count {
-      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2));
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 2rpx));
     }
   }
 
@@ -162,15 +144,30 @@
     border-radius: calc(@badge-large-height / 2);
   }
 
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--ribbon-left,
   &--large&--triangle-right,
   &--large&--triangle-left {
     width: calc(@badge-large-height * 2);
     height: calc(@badge-large-height * 2);
   }
 
-  &__content:not(:empty) + &--ribbon.@{prefix}-has-count,
-  &__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
-  &__content:not(:empty) + &--ribbon-left.@{prefix}-has-count,
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--triangle-right {
+    .@{prefix}-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 2rpx));
+    }
+  }
+
+  &--large&--ribbon-left,
+  &--large&--triangle-left {
+    .@{prefix}-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 2rpx));
+    }
+  }
+
   &__content:not(:empty) + &--bubble.@{prefix}-has-count,
   &__content:not(:empty) + &--circle.@{prefix}-has-count,
   &__content:not(:empty) + &--square.@{prefix}-has-count {
@@ -178,20 +175,9 @@
     transform: translate(-50%, -50%);
     position: absolute;
     top: 0;
-  }
-
-  &__content:not(:empty) + &--ribbon.@{prefix}-has-count,
-  &__content:not(:empty) + &--ribbon-right.@{prefix}-has-count,
-  &__content:not(:empty) + &--bubble.@{prefix}-has-count,
-  &__content:not(:empty) + &--circle.@{prefix}-has-count,
-  &__content:not(:empty) + &--square.@{prefix}-has-count {
     left: 100%;
   }
 
-  &__content:not(:empty) + &--ribbon-left.@{prefix}-has-count {
-    right: 100%;
-  }
-
   &__content-text {
     display: block;
     font: @font-body-large;

From 4e2a6c40c3bbc9650080b1d6def9feea58d5aee5 Mon Sep 17 00:00:00 2001
From: anlyyao <anly_yaw@163.com>
Date: Thu, 25 Dec 2025 14:11:54 +0800
Subject: [PATCH 8/8] fix: fix cr

---
 .../__test__/__snapshots__/demo.test.js.snap  | 34 +++++++++++++++++++
 .../badge/_example/theme/index.wxml           |  6 ++++
 packages/components/badge/badge.less          | 13 +++----
 3 files changed, 47 insertions(+), 6 deletions(-)

diff --git a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
index ac3d0b739..3eb16fa34 100644
--- a/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
+++ b/packages/components/badge/__test__/__snapshots__/demo.test.js.snap
@@ -254,6 +254,23 @@ exports[`Badge Badge theme demo works fine 1`] = `
   <t-cell
     tClass="t-class-cell"
     title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="ribbon-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
   >
     <t-badge
       count="NEW"
@@ -276,6 +293,23 @@ exports[`Badge Badge theme demo works fine 1`] = `
   <t-cell
     tClass="t-class-cell"
     title="单行标题"
+  >
+    <t-badge
+      count="NEW"
+      offset="{{
+        Array [
+          0,
+          0,
+        ]
+      }}"
+      shape="triangle-left"
+      slot="note"
+    />
+  </t-cell>
+  <t-cell
+    bordered="{{false}}"
+    tClass="t-class-cell"
+    title="单行标题"
   >
     <t-badge
       count="NEW"
diff --git a/packages/components/badge/_example/theme/index.wxml b/packages/components/badge/_example/theme/index.wxml
index 013e29976..7a1d98d67 100644
--- a/packages/components/badge/_example/theme/index.wxml
+++ b/packages/components/badge/_example/theme/index.wxml
@@ -28,10 +28,16 @@
 
 <view class="demo-desc" style="margin-bottom: 32rpx">角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
   <t-badge count="NEW" offset="{{skylineRender ? ['-18rpx', '-32rpx']: [0, 0]}}" shape="ribbon" slot="note" />
 </t-cell>
 
 <view class="demo-desc" style="margin-bottom: 32rpx">三角角标</view>
 <t-cell title="单行标题" t-class="t-class-cell">
+  <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-left" slot="note" />
+</t-cell>
+<t-cell title="单行标题" bordered="{{false}}" t-class="t-class-cell">
   <t-badge count="NEW" offset="{{skylineRender ? ['-24rpx', '-32rpx']: [0, 0]}}" shape="triangle-right" slot="note" />
 </t-cell>
diff --git a/packages/components/badge/badge.less b/packages/components/badge/badge.less
index 37fb2a81f..b873062d1 100644
--- a/packages/components/badge/badge.less
+++ b/packages/components/badge/badge.less
@@ -98,7 +98,7 @@
 
   &--ribbon,
   &--ribbon-right {
-    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 82%, transparent 82%);
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
   }
 
   &--triangle-right {
@@ -111,12 +111,12 @@
     right: 0;
 
     .@{prefix}-badge__count {
-      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 2rpx));
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
     }
   }
 
   &--ribbon-left {
-    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 82%, transparent 82%);
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
   }
 
   &--triangle-left {
@@ -128,7 +128,7 @@
     left: 0;
 
     .@{prefix}-badge__count {
-      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 2rpx));
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 32rpx) / 2 + 1rpx));
     }
   }
 
@@ -151,20 +151,21 @@
   &--large&--triangle-left {
     width: calc(@badge-large-height * 2);
     height: calc(@badge-large-height * 2);
+    padding: 0;
   }
 
   &--large&--ribbon,
   &--large&--ribbon-right,
   &--large&--triangle-right {
     .@{prefix}-badge__count {
-      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 2rpx));
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
     }
   }
 
   &--large&--ribbon-left,
   &--large&--triangle-left {
     .@{prefix}-badge__count {
-      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 2rpx));
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 40rpx) / 2 + 3rpx));
     }
   }