tntd 2.8.0-beta.2 → 3.0.0-beta

package/es/tabs/style/index.less

@@ -0,0 +1,437 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import './card-style';
+// @import './ladder-card';
+
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+// Hidden content
+.tabs-hidden-content() {
+  height: 0;
+  padding: 0 !important;
+  overflow: hidden;
+  opacity: 0;
+  pointer-events: none;
+  input {
+    visibility: hidden;
+  }
+}
+
+.@{tab-prefix-cls} {
+  .reset-component;
+
+  position: relative;
+  overflow: hidden;
+  .clearfix;
+
+  &-ink-bar {
+    position: absolute;
+    bottom: 1px;
+    left: 0;
+    z-index: 1;
+    box-sizing: border-box;
+    width: 0;
+    height: 2px;
+    background-color: @tabs-ink-bar-color;
+    transform-origin: 0 0;
+  }
+
+  &-bar {
+    margin: @tabs-bar-margin;
+    border-bottom: @border-width-base @border-style-base @border-color-split;
+    outline: none;
+    transition: padding 0.3s @ease-in-out;
+  }
+
+  &-nav-container {
+    position: relative;
+    box-sizing: border-box;
+    margin-bottom: -1px;
+    overflow: hidden;
+    font-size: @tabs-title-font-size;
+    line-height: @line-height-base;
+    white-space: nowrap;
+    transition: padding 0.3s @ease-in-out;
+    .clearfix;
+
+    &-scrolling {
+      padding-right: @tabs-scrolling-size;
+      padding-left: @tabs-scrolling-size;
+    }
+  }
+
+  // https://github.com/ant-design/ant-design/issues/9104
+  &-bottom &-bottom-bar {
+    margin-top: 16px;
+    margin-bottom: 0;
+    border-top: @border-width-base @border-style-base @border-color-split;
+    border-bottom: none;
+  }
+
+  &-bottom &-bottom-bar &-ink-bar {
+    top: 1px;
+    bottom: auto;
+  }
+
+  &-bottom &-bottom-bar &-nav-container {
+    margin-top: -1px;
+    margin-bottom: 0;
+  }
+
+  &-tab-prev,
+  &-tab-next {
+    position: absolute;
+    z-index: 2;
+    width: 0;
+    height: 100%;
+    color: @text-color-secondary;
+    text-align: center;
+    background-color: transparent;
+    border: 0;
+    cursor: pointer;
+    opacity: 0;
+    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
+    user-select: none;
+    pointer-events: none;
+
+    &.@{tab-prefix-cls}-tab-arrow-show {
+      width: @tabs-scrolling-size;
+      height: 100%;
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    &:hover {
+      color: @text-color;
+    }
+
+    &-icon {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      font-weight: bold;
+      font-style: normal;
+      font-variant: normal;
+      line-height: inherit;
+      text-align: center;
+      text-transform: none;
+      transform: translate(-50%, -50%);
+
+      &-target {
+        display: block;
+        .iconfont-size-under-12px(10px);
+      }
+    }
+  }
+
+  &-tab-btn-disabled {
+    cursor: not-allowed;
+    &,
+    &:hover {
+      color: @disabled-color;
+    }
+  }
+
+  &-tab-next {
+    right: 2px;
+  }
+
+  &-tab-prev {
+    left: 0;
+    :root & {
+      filter: none;
+    }
+  }
+
+  &-nav-wrap {
+    margin-bottom: -1px;
+    overflow: hidden;
+  }
+
+  &-nav-scroll {
+    overflow: hidden;
+    white-space: nowrap;
+  }
+
+  &-nav {
+    position: relative;
+    display: inline-block;
+    box-sizing: border-box;
+    margin: 0;
+    padding-left: 0;
+    list-style: none;
+    transition: transform 0.3s @ease-in-out;
+
+    &::before,
+    &::after {
+      display: table;
+      content: ' ';
+    }
+
+    &::after {
+      clear: both;
+    }
+
+    .@{tab-prefix-cls}-tab {
+      position: relative;
+      display: inline-block;
+      box-sizing: border-box;
+      height: 100%;
+      margin: @tabs-horizontal-margin;
+      padding: @tabs-horizontal-padding;
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 0.3s @ease-in-out;
+
+      &::before {
+        position: absolute;
+        top: -1px;
+        left: 0;
+        width: 100%;
+        border-top: 2px solid transparent;
+        border-radius: @border-radius-base @border-radius-base 0 0;
+        transition: all 0.3s;
+        content: '';
+        pointer-events: none;
+      }
+
+      &:last-child {
+        margin-right: 0;
+      }
+
+      &:hover {
+        color: @tabs-hover-color;
+      }
+
+      &:active {
+        color: @tabs-active-color;
+      }
+
+      .@{iconfont-css-prefix} {
+        margin-right: 8px;
+      }
+
+      &-active {
+        color: @tabs-highlight-color;
+        font-weight: 500;
+      }
+
+      &-disabled {
+        &,
+        &:hover {
+          color: @disabled-color;
+          cursor: not-allowed;
+        }
+      }
+    }
+  }
+
+  .@{tab-prefix-cls}-large-bar {
+    .@{tab-prefix-cls}-nav-container {
+      font-size: @tabs-title-font-size-lg;
+    }
+    .@{tab-prefix-cls}-tab {
+      padding: @tabs-horizontal-padding-lg;
+    }
+  }
+
+  .@{tab-prefix-cls}-small-bar {
+    .@{tab-prefix-cls}-nav-container {
+      font-size: @tabs-title-font-size-sm;
+    }
+    .@{tab-prefix-cls}-tab {
+      padding: @tabs-horizontal-padding-sm;
+    }
+  }
+
+  // Create an empty element to avoid margin collapsing
+  // https://github.com/ant-design/ant-design/issues/18103
+  &-content::before {
+    display: block;
+    overflow: hidden;
+    content: '';
+  }
+
+  // Horizontal Content
+  .@{tab-prefix-cls}-top-content,
+  .@{tab-prefix-cls}-bottom-content {
+    width: 100%;
+    > .@{tab-prefix-cls}-tabpane {
+      flex-shrink: 0;
+      width: 100%;
+      -webkit-backface-visibility: hidden;
+      opacity: 1;
+      transition: opacity 0.45s;
+    }
+
+    > .@{tab-prefix-cls}-tabpane-inactive {
+      .tabs-hidden-content();
+    }
+
+    &.@{tab-prefix-cls}-content-animated {
+      display: flex;
+      flex-direction: row;
+      transition: margin-left 0.3s @ease-in-out;
+      will-change: margin-left;
+    }
+  }
+
+  // Vertical Bar
+  .@{tab-prefix-cls}-left-bar,
+  .@{tab-prefix-cls}-right-bar {
+    height: 100%;
+    border-bottom: 0;
+
+    .@{tab-prefix-cls}-tab-arrow-show {
+      width: 100%;
+      height: @tabs-scrolling-size;
+    }
+
+    .@{tab-prefix-cls}-tab {
+      display: block;
+      float: none;
+      margin: @tabs-vertical-margin;
+      padding: @tabs-vertical-padding;
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    .@{tab-prefix-cls}-extra-content {
+      text-align: center;
+    }
+
+    .@{tab-prefix-cls}-nav-scroll {
+      width: auto;
+    }
+
+    .@{tab-prefix-cls}-nav-container,
+    .@{tab-prefix-cls}-nav-wrap {
+      height: 100%;
+    }
+
+    .@{tab-prefix-cls}-nav-container {
+      margin-bottom: 0;
+
+      &.@{tab-prefix-cls}-nav-container-scrolling {
+        padding: @tabs-scrolling-size 0;
+      }
+    }
+
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-bottom: 0;
+    }
+
+    .@{tab-prefix-cls}-nav {
+      width: 100%;
+    }
+
+    .@{tab-prefix-cls}-ink-bar {
+      top: 0;
+      bottom: auto;
+      left: auto;
+      width: 2px;
+      height: 0;
+    }
+
+    .@{tab-prefix-cls}-tab-next {
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: @tabs-scrolling-size;
+    }
+
+    .@{tab-prefix-cls}-tab-prev {
+      top: 0;
+      width: 100%;
+      height: @tabs-scrolling-size;
+    }
+  }
+
+  // Vertical Content
+  .@{tab-prefix-cls}-left-content,
+  .@{tab-prefix-cls}-right-content {
+    width: auto;
+    margin-top: 0 !important;
+    overflow: hidden;
+  }
+
+  // Vertical - Left
+  .@{tab-prefix-cls}-left-bar {
+    float: left;
+    margin-right: -1px;
+    margin-bottom: 0;
+    border-right: @border-width-base @border-style-base @border-color-split;
+    .@{tab-prefix-cls}-tab {
+      text-align: right;
+    }
+    .@{tab-prefix-cls}-nav-container {
+      margin-right: -1px;
+    }
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-right: -1px;
+    }
+    .@{tab-prefix-cls}-ink-bar {
+      right: 1px;
+    }
+  }
+  .@{tab-prefix-cls}-left-content {
+    padding-left: 24px;
+    border-left: @border-width-base @border-style-base @border-color-split;
+  }
+
+  // Vertical - Right
+  .@{tab-prefix-cls}-right-bar {
+    float: right;
+    margin-bottom: 0;
+    margin-left: -1px;
+    border-left: @border-width-base @border-style-base @border-color-split;
+    .@{tab-prefix-cls}-nav-container {
+      margin-left: -1px;
+    }
+    .@{tab-prefix-cls}-nav-wrap {
+      margin-left: -1px;
+    }
+    .@{tab-prefix-cls}-ink-bar {
+      left: 1px;
+    }
+  }
+  .@{tab-prefix-cls}-right-content {
+    padding-right: 24px;
+    border-right: @border-width-base @border-style-base @border-color-split;
+  }
+}
+
+.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
+.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
+  transition: transform 0.3s @ease-in-out, width 0.2s @ease-in-out, left 0.3s @ease-in-out;
+}
+
+.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
+.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
+  transition: transform 0.3s @ease-in-out, height 0.2s @ease-in-out, top 0.3s @ease-in-out;
+}
+
+// No animation
+.tabs-no-animation() {
+  > .@{tab-prefix-cls}-content-animated {
+    margin-left: 0 !important;
+    transform: none !important;
+  }
+  > .@{tab-prefix-cls}-tabpane-inactive {
+    .tabs-hidden-content();
+  }
+}
+
+.no-flex,
+.@{tab-prefix-cls}-no-animation {
+  > .@{tab-prefix-cls}-content {
+    .tabs-no-animation();
+  }
+}
+
+.@{tab-prefix-cls}-left-content,
+.@{tab-prefix-cls}-right-content {
+  .tabs-no-animation();
+}

package/es/tabs/tabs.js

@@ -14,17 +14,19 @@ var __rest = this && this.__rest || function (s, e) {
  * @FilePath: /tntd/packages/tntd/src/tabs/tabs.tsx
  * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
  */
-import React, { forwardRef } from 'react';
+import React, { forwardRef, useMemo } from 'react';
 import { ConfigConsumer } from 'antd/es/config-provider';
 import { default as AntdTabs } from 'antd/es/tabs';
 import { doUpperTitle } from '../utils';
+import classname from 'classnames';
 export * from 'antd/es/tabs';
 export const Tabs = forwardRef((_a, ref) => {
   var {
       children,
-      upperCaseIgnore
+      upperCaseIgnore,
+      type
     } = _a,
-    rest = __rest(_a, ["children", "upperCaseIgnore"]);
+    rest = __rest(_a, ["children", "upperCaseIgnore", "type"]);
   let newChildren = children;
   if (Array.isArray(newChildren)) {
     newChildren = newChildren === null || newChildren === void 0 ? void 0 : newChildren.map(child => {
@@ -44,12 +46,28 @@ export const Tabs = forwardRef((_a, ref) => {
       return child;
     });
   }
+  const newType = useMemo(() => {
+    let newType = type;
+    if (type === 'ladder-card') {
+      newType = 'card';
+    } else if (type === 'editable-ladder-card') {
+      newType = 'editable-card';
+    }
+    return newType;
+  }, [type]);
   return React.createElement(ConfigConsumer, null, ({
     getPrefixCls
   }) => {
+    const prefix = getPrefixCls('tabs');
+    const className = classname(rest === null || rest === void 0 ? void 0 : rest.className, {
+      'tnt-tabs': true,
+      [`${prefix}-ladder-card`]: type === 'ladder-card' || type === 'editable-ladder-card'
+    });
     return React.createElement(AntdTabs, Object.assign({}, rest, {
       children: newChildren,
-      ref: ref
+      ref: ref,
+      type: newType,
+      className: className
     }));
   });
 });

package/es/tabs/tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,cAAc,cAAc,CAAA;AAW5B,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAAsC,EAAE,GAAG,EAAE,EAAE;QAA/C,EAAE,QAAQ,EAAE,eAAe,OAAW,EAAN,IAAI,cAApC,+BAAsC,CAAF;IACnC,IAAI,WAAW,GAA6B,QAAQ,CAAA;IACpD,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QAC9B,WAAW,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,CAAC,KAA+B,EAAE,EAAE;;YACjE,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,MAAM,WAAW,GAAY,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,WAAW,CAAA;gBACtD,MAAM,GAAG,GAA6B,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,GAAG,CAAA;gBACvD,uCACK,KAAK,KACR,KAAK,kCACA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KACf,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,eAAe,CAAC,OAE9D;aACF;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,OAAO,YAAY,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;aAC5C;YACD,OAAO,KAAK,CAAA;QACd,CAAC,CAAC,CAAA;KACH;IAED,OAAO,CACL,oBAAC,cAAc,QACZ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;QACpB,OAAO,oBAAC,QAAQ,oBAAK,IAAI,IAAE,QAAQ,EAAE,WAAW,EAAE,GAAG,EAAE,GAAG,IAAI,CAAA;IAChE,CAAC,CACc,CAClB,CAAA;AACH,CAAC,CACe,CAAA;AAElB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAA","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2023-10-16 11:08:28\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2023-10-16 16:24:53\n * @FilePath: /tntd/packages/tntd/src/tabs/tabs.tsx\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport React, { forwardRef } from 'react'\nimport type { TabsProps as AntdTabsProps } from 'antd/es/tabs'\nimport { ConfigConsumer } from 'antd/es/config-provider'\nimport { default as AntdTabs } from 'antd/es/tabs'\nimport { doUpperTitle } from '../utils'\nexport * from 'antd/es/tabs'\nexport interface TabsProps extends AntdTabsProps {\n  children?: Array<React.ReactElement>\n  upperCaseIgnore?: Array<string>\n}\n\ninterface TabsComponent\n  extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<AntdTabs>> {\n  TabPane: typeof AntdTabs.TabPane\n}\n\nexport const Tabs = forwardRef<AntdTabs, TabsProps>(\n  ({ children, upperCaseIgnore, ...rest }, ref) => {\n    let newChildren: string | React.ReactNode = children\n    if (Array.isArray(newChildren)) {\n      newChildren = newChildren?.map((child: string | React.ReactNode) => {\n        if (React.isValidElement(child)) {\n          const upperIgnore: boolean = child?.props?.upperIgnore\n          const tab: string | React.ReactNode = child?.props?.tab\n          return {\n            ...child,\n            props: {\n              ...child?.props,\n              tab: upperIgnore ? tab : doUpperTitle(tab, upperCaseIgnore),\n            },\n          }\n        }\n        if (typeof child === 'string') {\n          return doUpperTitle(child, upperCaseIgnore)\n        }\n        return child\n      })\n    }\n\n    return (\n      <ConfigConsumer>\n        {({ getPrefixCls }) => {\n          return <AntdTabs {...rest} children={newChildren} ref={ref} />\n        }}\n      </ConfigConsumer>\n    )\n  }\n) as TabsComponent\n\nTabs.TabPane = AntdTabs.TabPane\n"]}
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/tabs/tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA;;;;;;;GAOG;AACH,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAElD,OAAO,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,SAAS,MAAM,YAAY,CAAA;AAClC,cAAc,cAAc,CAAA;AAY5B,MAAM,CAAC,MAAM,IAAI,GAAG,UAAU,CAC5B,CAAC,EAA4C,EAAE,GAAG,EAAE,EAAE;QAArD,EAAE,QAAQ,EAAE,eAAe,EAAE,IAAI,OAAW,EAAN,IAAI,cAA1C,uCAA4C,CAAF;IACzC,IAAI,WAAW,GAA6B,QAAQ,CAAA;IACpD,IAAI,KAAK,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE;QAC9B,WAAW,GAAG,WAAW,aAAX,WAAW,uBAAX,WAAW,CAAE,GAAG,CAAC,CAAC,KAA+B,EAAE,EAAE;;YACjE,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE;gBAC/B,MAAM,WAAW,GAAY,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,WAAW,CAAA;gBACtD,MAAM,GAAG,GAA6B,MAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,0CAAE,GAAG,CAAA;gBACvD,uCACK,KAAK,KACR,KAAK,kCACA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,KAAK,KACf,GAAG,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,YAAY,CAAC,GAAG,EAAE,eAAe,CAAC,OAE9D;aACF;YACD,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,OAAO,YAAY,CAAC,KAAK,EAAE,eAAe,CAAC,CAAA;aAC5C;YACD,OAAO,KAAK,CAAA;QACd,CAAC,CAAC,CAAA;KACH;IAED,MAAM,OAAO,GAAG,OAAO,CAAC,GAAG,EAAE;QAC3B,IAAI,OAAO,GAAG,IAAI,CAAA;QAClB,IAAI,IAAI,KAAK,aAAa,EAAE;YAC1B,OAAO,GAAG,MAAM,CAAA;SACjB;aAAM,IAAI,IAAI,KAAK,sBAAsB,EAAE;YAC1C,OAAO,GAAG,eAAe,CAAA;SAC1B;QACD,OAAO,OAAO,CAAA;IAChB,CAAC,EAAE,CAAC,IAAI,CAAC,CAAC,CAAA;IAEV,OAAO,CACL,oBAAC,cAAc,QACZ,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;QACpB,MAAM,MAAM,GAAG,YAAY,CAAC,MAAM,CAAC,CAAA;QACnC,MAAM,SAAS,GAAG,SAAS,CAAC,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,SAAS,EAAE;YAC3C,UAAU,EAAE,IAAI;YAChB,CAAC,GAAG,MAAM,cAAc,CAAC,EAAE,IAAI,KAAK,aAAa,IAAI,IAAI,KAAK,sBAAsB;SACrF,CAAC,CAAA;QAEF,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,QAAQ,EAAE,WAAW,EACrB,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,OAAmB,EACzB,SAAS,EAAE,SAAS,IACpB,CACH,CAAA;IACH,CAAC,CACc,CAClB,CAAA;AACH,CAAC,CACe,CAAA;AAElB,IAAI,CAAC,OAAO,GAAG,QAAQ,CAAC,OAAO,CAAA","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2023-10-16 11:08:28\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2023-10-16 16:24:53\n * @FilePath: /tntd/packages/tntd/src/tabs/tabs.tsx\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport React, { forwardRef, useMemo } from 'react'\nimport type { TabsProps as AntdTabsProps, TabsType } from 'antd/es/tabs'\nimport { ConfigConsumer } from 'antd/es/config-provider'\nimport { default as AntdTabs } from 'antd/es/tabs'\nimport { doUpperTitle } from '../utils'\nimport classname from 'classnames'\nexport * from 'antd/es/tabs'\nexport interface TabsProps extends Omit<AntdTabsProps, 'type'> {\n  children?: Array<React.ReactElement>\n  upperCaseIgnore?: Array<string>\n  type?: TabsType | 'ladder-card' | 'editable-ladder-card'\n}\n\ninterface TabsComponent\n  extends React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<AntdTabs>> {\n  TabPane: typeof AntdTabs.TabPane\n}\n\nexport const Tabs = forwardRef<AntdTabs, TabsProps>(\n  ({ children, upperCaseIgnore, type, ...rest }, ref) => {\n    let newChildren: string | React.ReactNode = children\n    if (Array.isArray(newChildren)) {\n      newChildren = newChildren?.map((child: string | React.ReactNode) => {\n        if (React.isValidElement(child)) {\n          const upperIgnore: boolean = child?.props?.upperIgnore\n          const tab: string | React.ReactNode = child?.props?.tab\n          return {\n            ...child,\n            props: {\n              ...child?.props,\n              tab: upperIgnore ? tab : doUpperTitle(tab, upperCaseIgnore),\n            },\n          }\n        }\n        if (typeof child === 'string') {\n          return doUpperTitle(child, upperCaseIgnore)\n        }\n        return child\n      })\n    }\n\n    const newType = useMemo(() => {\n      let newType = type\n      if (type === 'ladder-card') {\n        newType = 'card'\n      } else if (type === 'editable-ladder-card') {\n        newType = 'editable-card'\n      }      \n      return newType\n    }, [type])\n\n    return (\n      <ConfigConsumer>\n        {({ getPrefixCls }) => {          \n          const prefix = getPrefixCls('tabs')\n          const className = classname(rest?.className, {\n            'tnt-tabs': true,\n            [`${prefix}-ladder-card`]: type === 'ladder-card' || type === 'editable-ladder-card'\n          })\n\n          return (\n            <AntdTabs\n              {...rest}\n              children={newChildren}\n              ref={ref}\n              type={newType as TabsType}\n              className={className}\n            />\n          )\n        }}\n      </ConfigConsumer>\n    )\n  }\n) as TabsComponent\n\nTabs.TabPane = AntdTabs.TabPane\n"]}

package/es/tabs/tabs.less

@@ -0,0 +1,114 @@
+// Tabs 自定义梯形页签样式
+@tab-prefix-cls: ~'@{ant-prefix}-tabs';
+
+.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-ladder-card.@{tab-prefix-cls}-top {
+
+  padding: 0 12px;
+  position: relative;
+  left: -12px;
+  padding-bottom: 20px;
+
+  .@{tab-prefix-cls}-tab {
+    position: relative;
+    min-width: 106px;
+    height: 40px;
+    line-height: 40px;
+    border-top-left-radius: @border-radius-lg;
+    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.10));
+    box-shadow: 0px 0px 2px -5px rgba(0, 0, 0, 0.05);
+    border: none;
+    margin: 0px 30px 0px 0px;
+    padding: 0px 12px 0;
+    background: @fill-color-quaternary;
+    text-align: right;
+    color: @text-color-secondary;
+    
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: -52px;
+      height: 100%;
+      width: 64px;
+      z-index: 1;
+      background: inherit;
+      clip-path: path('M0 0H22.3875C28.4632 0 34.2094 2.76179 38.0049 7.5061L64 40H0V0Z');
+    }
+
+  }
+
+  .@{tab-prefix-cls}-nav {
+    margin-top: 12px;
+    padding-left: 12px;
+  }
+
+  .@{tab-prefix-cls}-nav-container {
+    height: auto;
+    position: relative;
+    left: -12px;
+    width: calc(100% + 12px);
+  }
+
+  .@{tab-prefix-cls}-bar.@{tab-prefix-cls}-top-bar.@{tab-prefix-cls}-card-bar {
+    border-bottom: none;
+    margin-bottom: 0;
+  }
+  
+      
+  // 鼠标选中时，active状态在上层
+  .@{tab-prefix-cls}-tab-active {
+    z-index: 3;
+    background: @tabs-active-background;
+  }
+
+  .@{tab-prefix-cls}-tabpane{
+    background: @white;
+    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
+    padding: 20px 12px 12px;
+    border-bottom-right-radius: @border-radius-lg;
+    border-bottom-left-radius: @border-radius-lg;
+    border-top-right-radius: @border-radius-lg;
+  }
+}
+
+// // Tabs top类型 全局样式修改
+.tnt-tabs.@{tab-prefix-cls}.@{tab-prefix-cls}-top.@{tab-prefix-cls}-line {
+    .@{tab-prefix-cls}-bar {
+      border-bottom: none !important;
+    }
+
+    .@{tab-prefix-cls}-nav-container {
+      margin-bottom: none;
+    }
+
+    .@{tab-prefix-cls}-tab {
+      border-bottom: 1px solid transparent;
+      margin-bottom: 1px;
+      height: 40px;
+      line-height: 37px;
+      padding: 2px 12px 0;
+    }
+
+    .@{tab-prefix-cls}-tab:hover{
+      border-color: @border-color-secondary;
+    }
+}
+
+.tnt-tabs.@{tab-prefix-cls} {
+  .@{tab-prefix-cls}-nav {
+    .@{tab-prefix-cls}-tab {
+      color: @tabs-tab-color;
+      // 自定义图标默认都是 16px
+      i.anticon {
+        font-size: @font-size-lg;
+        margin-right: 4px;
+      }
+    }
+    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab-active {
+      color: @tabs-active-color;
+    }
+    .@{tab-prefix-cls}-tab.@{tab-prefix-cls}-tab:hover {
+      color: @tabs-hover-color;
+    }
+  }
+}

package/es/tag/color.less

@@ -0,0 +1,43 @@
+@preset-colors-custom: grey, blue, green, red, gold, lightblue, bluegrey, purplegrey, purple, lightpurple, lightgreen, pink, rose, orange,  magenta, volcano, yellow, cyan, lime, geekblue, tnt-pink, tnt-orange, tnt-purple;
+
+
+@grey-7: @text-color-secondary;
+@grey-4: @border-color-base;
+@grey-1: @tag-default-bg;
+
+@rose-7:#D8395E; 
+@rose-4:  #FEA3B4;
+@rose-1:  #FFF1F3; 
+
+@lightblue-7: #1AA9E6; 
+@lightblue-4: #8FE0FF;
+@lightblue-1: #F0F9FF; 
+
+@bluegrey-7: #486FBB; 
+@bluegrey-4: #A1BCEF;
+@bluegrey-1: #F4F8FF; 
+
+@purplegrey-7: #4E5BA6; 
+@purplegrey-4: #AFB5D9;
+@purplegrey-1: #F8F9FC; 
+
+@tnt-purple-7: #6E54D4; 
+@tnt-purple-4:  #BDB4FE;
+@tnt-purple-1:  #F4F3FF; 
+
+@lightpurple-7: #5161D7; 
+@lightpurple-4:  #A4BCFD;
+@lightpurple-1:  #EEF4FF; 
+
+@lightgreen-7: #2E9C98; 
+@lightgreen-4:  #8CE0DD;
+@lightgreen-1:  #F1FBFB; 
+
+@tnt-pink-7: #D03E93; 
+@tnt-pink-4:  #FAA7E0;
+@tnt-pink-1:  #FDF2FA;
+
+@tnt-orange-7:#DF5F28; 
+@tnt-orange-4:  #FEB173;
+@tnt-orange-1:  #FFF6ED; 
+

package/es/tag/index.js

@@ -1,4 +1,13 @@
-import Tag from 'antd/es/tag';
-import 'antd/es/tag/style';
-export * from 'antd/es/tag';
+/*
+ * @Author: 周泽飞 zefei.zhou@tongdun.net
+ * @Date: 2024-02-29 14:21:28
+ * @LastEditors: 周泽飞 zefei.zhou@tongdun.net
+ * @LastEditTime: 2024-03-05 14:05:27
+ * @FilePath: /tntd/packages/tntd/src/tag/index.ts
+ * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
+ */
+import './style';
+import './tag.less';
+import { Tag } from './tag';
+export * from './tag';
 export default Tag;

package/es/tag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tag/index.ts"],"names":[],"mappings":"AAAA,OAAO,GAAG,MAAM,aAAa,CAAA;AAE7B,OAAO,mBAAmB,CAAA;AAE1B,cAAc,aAAa,CAAA;AAE3B,eAAe,GAAG,CAAA","sourcesContent":["import Tag from 'antd/es/tag'\n\nimport 'antd/es/tag/style'\n\nexport * from 'antd/es/tag'\n\nexport default Tag\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/tag/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,SAAS,CAAA;AAChB,OAAO,YAAY,CAAA;AACnB,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAA;AAE3B,cAAc,OAAO,CAAA;AAErB,eAAe,GAAG,CAAA","sourcesContent":["/*\n * @Author: 周泽飞 zefei.zhou@tongdun.net\n * @Date: 2024-02-29 14:21:28\n * @LastEditors: 周泽飞 zefei.zhou@tongdun.net\n * @LastEditTime: 2024-03-05 14:05:27\n * @FilePath: /tntd/packages/tntd/src/tag/index.ts\n * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE\n */\nimport './style'\nimport './tag.less'\nimport { Tag } from './tag'\n\nexport * from './tag'\n\nexport default Tag\n"]}

package/es/tag/style/index.js

@@ -0,0 +1,2 @@
+import '../../style/index.less';
+import './index.less';

package/es/tag/style/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/tag/style/index.tsx"],"names":[],"mappings":"AAAA,OAAO,wBAAwB,CAAA;AAC/B,OAAO,cAAc,CAAA","sourcesContent":["import '../../style/index.less'\nimport './index.less'\n"]}