chore: test

Author: anlyyao

src/badge/_example/style/index.less

@@ -14,3 +14,66 @@
 .block {
   padding: 16px 16px 24px;
 }
+
+// TODO: 样式调试。待设计走查需提交到子仓库
+
+@badge-color: var(--td-error-color);
+
+.t-badge {
+  &--ribbon,
+  &--ribbon-right {
+    background: linear-gradient(45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
+
+  &--ribbon,
+  &--ribbon-right,
+  &--triangle-right {
+    right: 0;
+
+    .t-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + .5px) );
+    }
+  }
+
+  &--ribbon-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%, @badge-color 85%, transparent 85%);
+  }
+
+  &--triangle-left {
+    background: linear-gradient(-45deg, transparent 50%, @badge-color 50%);
+  }
+
+  &--ribbon-left,
+  &--triangle-left {
+    left: 0;
+
+    .t-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-extraSmall, 16px) / 2 + .5px));
+    }
+  }
+
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--ribbon-left,
+  &--large&--triangle-right,
+  &--large&--triangle-left {
+    padding: 0;
+  }
+
+  &--large&--ribbon,
+  &--large&--ribbon-right,
+  &--large&--triangle-right {
+
+    .t-badge__count {
+      transform: rotate(45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
+    }
+  }
+
+  &--large&--ribbon-left,
+  &--large&--triangle-left {
+
+    .t-badge__count {
+      transform: rotate(-45deg) translateY(calc(-1 * var(--td-line-height-mark-small, 20px) / 2 + 1.5px));
+    }
+  }
+}

src/badge/_example/theme.tsx

@@ -29,12 +29,16 @@ export default function ThemeBadge() {
       <div className="summary" style={{ marginBottom: '16px' }}>
         角标
       </div>
+      {/* TODO: 待设计走查完需要移除 */}
       <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="ribbon" />}></Cell>
+      <Cell title="单行标题" note={<Badge size="large" count="NEW" offset={[0, 0]} shape="ribbon" />}></Cell>
+      <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="ribbon-left" />}></Cell>
+      <Cell title="单行标题" note={<Badge size="large" count="NEW" offset={[0, 0]} shape="ribbon-left" />}></Cell>
 
-      <div className="summary" style={{ marginBottom: '16px' }}>
-        三角角标
-      </div>
       <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="triangle-right" />}></Cell>
+      <Cell title="单行标题" note={<Badge count="NEW" size="large" offset={[0, 0]} shape="triangle-right" />}></Cell>
+      <Cell title="单行标题" note={<Badge count="NEW" offset={[0, 0]} shape="triangle-left" />}></Cell>
+      <Cell title="单行标题" note={<Badge count="NEW" size="large" offset={[0, 0]} shape="triangle-left" />}></Cell>
     </>
   );
 }