project init & fix ui

miniprogram_npm/tdesign-miniprogram/tab-bar/README.en-US.md

@@ -0,0 +1,35 @@
+:: BASE_DOC ::
+
+## API
+### TabBar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+bordered | Boolean | true | \- | N
+custom-style `v0.25.0` | String | - | \- | N
+external-classes | Array | - | `['t-class']` | N
+fixed | Boolean | true | \- | N
+safe-area-inset-bottom | Boolean | true | \- | N
+shape | String | normal | options：normal/round | N
+split | Boolean | true | \- | N
+style | String | - | \- | N
+theme | String | normal | options：normal/tag | N
+value | String / Number / Array | null | Typescript：`string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`string \| number \| Array<string \| number>` | N
+
+### TabBar Events
+
+name | params | description
+-- | -- | --
+change | \- | \-
+
+### TabBarItem Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+badge-props | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+custom-style | String | - | \- | N
+icon | String / Slot | - | \- | N
+style | String | - | \- | N
+sub-tab-bar | Array | - | Typescript：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | \- | N

miniprogram_npm/tdesign-miniprogram/tab-bar/README.md

@@ -0,0 +1,83 @@
+---
+title: TabBar 标签栏
+description: 用于在不同功能模块之间进行快速切换，位于页面底部。
+spline: navigation
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-100%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-93%25-blue" /></span>
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+  "t-tab-bar-item": "tdesign-miniprogram/tab-bar/tab-bar-item"
+}
+```
+
+## 代码演示
+
+### 组件类型
+#### 纯文本标签栏
+
+{{ text-only }}
+
+#### 图标加文字标签栏
+
+{{ base }}
+
+#### 纯图标标签栏
+
+{{ text-only }}
+
+#### 双层级纯文本标签栏
+
+{{ sub }}
+
+### 组件样式
+
+#### 弱选中标签栏
+
+{{ badge }}
+
+#### 悬浮胶囊标签栏
+
+{{ round }}
+
+#### 自定义主题
+
+{{ custom }}
+
+## API
+### TabBar Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+bordered | Boolean | true | 是否显示外边框 | N
+custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+external-classes | Array | - | 组件类名，用于设置外层元素类名。`['t-class']` | N
+fixed | Boolean | true | 是否固定在底部 | N
+safe-area-inset-bottom | Boolean | true | 是否为 iPhoneX 留出底部安全距离 | N
+shape | String | normal | 标签栏的形状。可选项：normal/round | N
+split | Boolean | true | 是否需要分割线 | N
+theme | String | normal | 选项风格。可选项：normal/tag | N
+value | String / Number / Array | null | 当前选中标签的索引。TS 类型：`string \| number \| Array<string \| number>` | N
+default-value | String / Number / Array | undefined | 当前选中标签的索引。非受控属性。TS 类型：`string \| number \| Array<string \| number>` | N
+
+### TabBar Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(value: string | number)` | 选中标签切换时触发
+
+### TabBarItem Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+badge-props | Object | - | 图标右上角提示信息。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+custom-style | String | - | 自定义组件样式 | N
+icon | String / Slot | - | 图标名称 | N
+sub-tab-bar | Array | - | 二级菜单。TS 类型：`SubTabBarItem[] ` `interface SubTabBarItem { value: string; label: string }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tab-bar/type.ts) | N
+value | String / Number | - | 标识符 | N

miniprogram_npm/tdesign-miniprogram/tab-bar/props.d.ts

@@ -0,0 +1,3 @@
+import { TdTabBarProps } from './type';
+declare const props: TdTabBarProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/tab-bar/props.js

@@ -0,0 +1,42 @@
+const props = {
+    bordered: {
+        type: Boolean,
+        value: true,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    externalClasses: {
+        type: Array,
+    },
+    fixed: {
+        type: Boolean,
+        value: true,
+    },
+    safeAreaInsetBottom: {
+        type: Boolean,
+        value: true,
+    },
+    shape: {
+        type: String,
+        value: 'normal',
+    },
+    split: {
+        type: Boolean,
+        value: true,
+    },
+    theme: {
+        type: String,
+        value: 'normal',
+    },
+    value: {
+        type: null,
+        value: null,
+    },
+    defaultValue: {
+        type: null,
+        value: null,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item-props.d.ts

@@ -0,0 +1,3 @@
+import { TdTabBarItemProps } from './type';
+declare const props: TdTabBarItemProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item-props.js

@@ -0,0 +1,23 @@
+const props = {
+    badgeProps: {
+        type: Object,
+    },
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    icon: {
+        type: String,
+    },
+    style: {
+        type: String,
+        value: '',
+    },
+    subTabBar: {
+        type: Array,
+    },
+    value: {
+        type: null,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item.d.ts

@@ -0,0 +1,35 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class TabBarItem extends SuperComponent {
+    parent: any;
+    relations: RelationsOptions;
+    options: {
+        multipleSlots: boolean;
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        isSpread: boolean;
+        isChecked: boolean;
+        hasChildren: boolean;
+        currentName: string;
+        split: boolean;
+        iconOnly: boolean;
+        theme: string;
+        crowded: boolean;
+        shape: string;
+    };
+    properties: import("./type").TdTabBarItemProps;
+    observers: {
+        subTabBar(value: Record<string, any>[]): void;
+    };
+    lifetimes: {
+        attached(): Promise<void>;
+    };
+    methods: {
+        showSpread(): void;
+        toggle(): void;
+        selectChild(event: any): void;
+        checkActive(value: any): void;
+        closeSpread(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item.js

@@ -0,0 +1,117 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './tab-bar-item-props';
+import { getRect } from '../common/utils';
+const { prefix } = config;
+const classPrefix = `${prefix}-tab-bar-item`;
+let TabBarItem = class TabBarItem extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.parent = null;
+        this.relations = {
+            './tab-bar': {
+                type: 'ancestor',
+                linked(parent) {
+                    const { theme, split, shape } = parent.data;
+                    this.parent = parent;
+                    this.setData({
+                        theme,
+                        split,
+                        shape,
+                        currentName: this.properties.value ? this.properties.value : parent.initName(),
+                    });
+                    parent.updateChildren();
+                },
+            },
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.data = {
+            prefix,
+            classPrefix,
+            isSpread: false,
+            isChecked: false,
+            hasChildren: false,
+            currentName: '',
+            split: true,
+            iconOnly: false,
+            theme: '',
+            crowded: false,
+            shape: 'normal',
+        };
+        this.properties = props;
+        this.observers = {
+            subTabBar(value) {
+                this.setData({
+                    hasChildren: value.length > 0,
+                });
+            },
+        };
+        this.lifetimes = {
+            attached() {
+                return __awaiter(this, void 0, void 0, function* () {
+                    const res = yield getRect(this, `.${classPrefix}__text`);
+                    this.setData({ iconOnly: res.height === 0 });
+                });
+            },
+        };
+        this.methods = {
+            showSpread() {
+                this.setData({
+                    isSpread: true,
+                });
+            },
+            toggle() {
+                const { parent } = this;
+                const { currentName, hasChildren, isSpread } = this.data;
+                if (hasChildren) {
+                    this.setData({
+                        isSpread: !isSpread,
+                    });
+                }
+                parent.updateValue(currentName);
+                parent.changeOtherSpread(currentName);
+            },
+            selectChild(event) {
+                const { parent } = this;
+                const { value } = event.target.dataset;
+                parent.updateValue(value);
+                this.setData({
+                    isSpread: false,
+                });
+            },
+            checkActive(value) {
+                const { currentName, subTabBar } = this.data;
+                const isChecked = (subTabBar === null || subTabBar === void 0 ? void 0 : subTabBar.some((item) => item.value === value)) || currentName === value;
+                this.setData({
+                    isChecked,
+                });
+            },
+            closeSpread() {
+                this.setData({
+                    isSpread: false,
+                });
+            },
+        };
+    }
+};
+TabBarItem = __decorate([
+    wxComponent()
+], TabBarItem);
+export default TabBarItem;

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item.json

@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon",
+    "t-badge": "../badge/badge"
+  }
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item.wxml

@@ -0,0 +1,62 @@
+<wxs src="../common/utils.wxs" module="_" />
+
+<view
+  style="{{ customStyle }}"
+  class="{{_.cls(classPrefix, [['split', split], ['text-only', !icon], ['crowded', crowded], shape])}}"
+>
+  <view
+    class="{{_.cls(classPrefix + '__content', [['checked', isChecked], theme])}}"
+    hover-class="{{classPrefix}}__content--active"
+    hover-stay-time="{{200}}"
+    bindtap="toggle"
+    aria-selected="{{(!hasChildren || !isSpread) && isChecked ? true : false}}"
+    aria-expanded="{{hasChildren && isSpread ? true : ''}}"
+    aria-role="{{hasChildren ? 'button' : 'tab'}}"
+  >
+    <view wx:if="{{icon}}" class="{{classPrefix}}__icon" style="height: {{iconOnly ? 24 : 20}}px">
+      <t-badge
+        wx:if="{{badgeProps.dot || badgeProps.count}}"
+        count="{{badgeProps.count}}"
+        max-count="{{badgeProps.maxCount || 99}}"
+        dot="{{badgeProps.dot}}"
+        content="{{badgeProps.content}}"
+        size="{{badgeProps.size}}"
+        visible="{{badgeProps.visible}}"
+        offset="{{badgeProps.offset || [0,0]}}"
+        t-class-count="{{prefix + '-badge-class'}}"
+      >
+        <t-icon name="{{icon}}" size="{{iconOnly ? 24 : 20}}" />
+      </t-badge>
+      <t-icon
+        wx:else
+        name="{{icon}}"
+        size="{{iconOnly ? 24 : 20}}"
+        aria-label="{{ariaLabel}}"
+        aria-hidden="{{iconOnly ? false : true}}"
+      />
+      <slot name="icon" />
+    </view>
+    <view class="{{_.cls(classPrefix + '__text', [['small', !!icon]])}}">
+      <t-icon wx:if="{{hasChildren}}" name="view-list" size="16" class="{{classPrefix}}__icon-menu" />
+      <slot />
+    </view>
+  </view>
+
+  <view class="{{classPrefix}}__spread" wx:if="{{hasChildren && isSpread}}">
+    <view
+      class="{{classPrefix}}__spread-item"
+      hover-class="{{classPrefix}}__spread-item--active"
+      hover-stay-time="{{200}}"
+      wx:for="{{subTabBar}}"
+      wx:for-item="child"
+      wx:for-index="index"
+      wx:key="index"
+      bind:tap="selectChild"
+      data-value="{{child.value || index}}"
+      aria-role="tab"
+    >
+      <view class="{{classPrefix}}__spread-item-split" wx:if="{{index !== 0}}" />
+      <view class="{{classPrefix}}__spread-item-text" data-value="{{child.value || index}}">{{ child.label }}</view>
+    </view>
+  </view>
+</view>

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar-item.wxss

@@ -0,0 +1,143 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+:host {
+  flex: 1;
+}
+.t-tab-bar-item {
+  height: var(--td-tab-bar-height, 80rpx);
+  box-sizing: border-box;
+  user-select: none;
+  position: relative;
+  margin: 16rpx 0;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  padding: 0 24rpx;
+}
+.t-tab-bar-item--text-only {
+  font-size: 32rpx;
+}
+.t-tab-bar-item--split:before {
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  border-left: 1px solid var(--td-tab-bar-border-color, var(--td-border-level-1-color, #e6e6e6));
+  transform: scaleX(0.5);
+  top: 16rpx;
+  bottom: 16rpx;
+}
+.t-tab-bar-item--crowded {
+  padding: 0 16rpx;
+}
+.t-tab-bar-item--round {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16rpx;
+  color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+}
+.t-tab-bar-item__content--checked {
+  color: var(--td-tab-bar-active-color, var(--td-primary-color, #0052d9));
+  font-weight: 600;
+}
+.t-tab-bar-item__content--tag {
+  border-radius: 99px;
+}
+.t-tab-bar-item__content--tag.t-tab-bar-item__content--checked {
+  background-color: var(--td-tab-bar-active-bg, var(--td-primary-color-1, #fff));
+}
+.t-tab-bar-item .t-badge-class {
+  transform: translate(50%, -10%) !important;
+}
+.t-tab-bar-item__text {
+  display: flex;
+  align-items: center;
+}
+.t-tab-bar-item__text--small {
+  font-size: 20rpx;
+  line-height: 32rpx;
+}
+.t-tab-bar-item__icon-menu {
+  margin-right: 8rpx;
+}
+.t-tab-bar-item__spread {
+  position: absolute;
+  top: 0;
+  left: 7%;
+  width: 86%;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  transform: translate3d(0, calc(-100% - 32rpx), 0);
+  z-index: 1;
+  border-radius: 12rpx;
+  color: var(--td-tab-bar-color, var(--td-font-gray-1, rgba(0, 0, 0, 0.9)));
+  box-shadow: var(--td-tab-bar-spread-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
+}
+.t-tab-bar-item__spread::before {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  width: 0;
+  height: 0;
+  border: 16rpx solid transparent;
+  border-top: 16rpx solid var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  transform: translate3d(-50%, 32rpx, 0);
+}
+.t-tab-bar-item__spread-item {
+  width: 100%;
+  height: 96rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  position: relative;
+  flex-direction: column;
+}
+.t-tab-bar-item__spread-item--active {
+  background-color: var(--td-tab-bar-hover-bg-color, rgba(0, 0, 0, 0.05));
+}
+.t-tab-bar-item__spread-item-split {
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  background-color: var(--td-tab-bar-spread-border-color, var(--td-border-color, #e7e7e7));
+  width: 80%;
+  height: 1px;
+  transform: translateY(0.5);
+}
+.t-tab-bar-item__spread-item-text {
+  padding-top: 24rpx;
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar.d.ts

@@ -0,0 +1,28 @@
+import { SuperComponent, RelationsOptions } from '../common/src/index';
+export default class Tabbar extends SuperComponent {
+    relations: RelationsOptions;
+    externalClasses: string[];
+    backupValue: number;
+    data: {
+        prefix: string;
+        classPrefix: string;
+    };
+    properties: import("./type").TdTabBarProps;
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    observers: {
+        value(): void;
+    };
+    lifetimes: {
+        ready(): void;
+    };
+    methods: {
+        showChildren(): void;
+        updateChildren(): void;
+        updateValue(value: any): void;
+        changeOtherSpread(value: any): void;
+        initName(): any;
+    };
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar.js

@@ -0,0 +1,78 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { wxComponent, SuperComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const classPrefix = `${prefix}-tab-bar`;
+let Tabbar = class Tabbar extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.relations = {
+            './tab-bar-item': {
+                type: 'descendant',
+            },
+        };
+        this.externalClasses = [`${prefix}-class`];
+        this.backupValue = -1;
+        this.data = {
+            prefix,
+            classPrefix,
+        };
+        this.properties = props;
+        this.controlledProps = [
+            {
+                key: 'value',
+                event: 'change',
+            },
+        ];
+        this.observers = {
+            value() {
+                this.updateChildren();
+            },
+        };
+        this.lifetimes = {
+            ready() {
+                this.showChildren();
+            },
+        };
+        this.methods = {
+            showChildren() {
+                const { value } = this.data;
+                this.$children.forEach((child) => {
+                    if (child.properties.value === value) {
+                        child.showSpread();
+                        child.setData({ crowded: this.$children > 3 });
+                    }
+                });
+            },
+            updateChildren() {
+                const { value } = this.data;
+                this.$children.forEach((child) => {
+                    child.checkActive(value);
+                });
+            },
+            updateValue(value) {
+                this._trigger('change', { value });
+            },
+            changeOtherSpread(value) {
+                this.$children.forEach((child) => {
+                    if (child.properties.value !== value) {
+                        child.closeSpread();
+                    }
+                });
+            },
+            initName() {
+                return (this.backupValue += 1);
+            },
+        };
+    }
+};
+Tabbar = __decorate([
+    wxComponent()
+], Tabbar);
+export default Tabbar;

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-tab-bar-item": "./tab-bar-item"
+  }
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar.wxml

@@ -0,0 +1,8 @@
+<wxs src="../common/utils.wxs" module="_" />
+<view
+  style="{{ customStyle }}"
+  class="{{_.cls(classPrefix, [['border', bordered], ['fixed', fixed], ['safe', safeAreaInsetBottom], shape])}} {{prefix}}-class"
+  aria-role="tablist"
+>
+  <slot />
+</view>

miniprogram_npm/tdesign-miniprogram/tab-bar/tab-bar.wxss

@@ -0,0 +1,69 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-tab-bar {
+  height: 110rpx;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  position: relative;
+  font-size: 16px;
+  background-color: var(--td-tab-bar-bg-color, var(--td-bg-color-block, #fff));
+  box-sizing: border-box;
+}
+.t-tab-bar--normal.t-tab-bar--border::before {
+  z-index: 1;
+  position: absolute;
+  box-sizing: border-box;
+  content: ' ';
+  pointer-events: none;
+  right: 0;
+  left: 0;
+  top: 0;
+  border-top: 1px solid var(--td-tab-bar-border-color, var(--td-border-level-1-color, #e6e6e6));
+  transform: scaleY(0.5);
+}
+.t-tab-bar--fixed {
+  position: fixed;
+  left: 0;
+  bottom: 0;
+  right: 0;
+}
+.t-tab-bar--normal.t-tab-bar--safe {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.t-tab-bar--round {
+  margin-left: 32rpx;
+  margin-right: 32rpx;
+  border-radius: 999px;
+  box-shadow: var(--td-tab-bar-round-shadow, var(--td-shadow-3, 0 6px 30px 5px rgba(0, 0, 0, 0.05), 0 16px 24px 2px rgba(0, 0, 0, 0.04), 0 8px 10px -5px rgba(0, 0, 0, 0.08)));
+}
+.t-tab-bar--fixed.t-tab-bar--round.t-tab-bar--safe {
+  bottom: constant(safe-area-inset-bottom);
+  bottom: env(safe-area-inset-bottom);
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/type.d.ts

@@ -0,0 +1,77 @@
+import { BadgeProps } from '../badge/index';
+export interface TdTabBarProps {
+    bordered?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    externalClasses?: {
+        type: ArrayConstructor;
+        value?: ['t-class'];
+    };
+    fixed?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    safeAreaInsetBottom?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    shape?: {
+        type: StringConstructor;
+        value?: 'normal' | 'round';
+    };
+    split?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    theme?: {
+        type: StringConstructor;
+        value?: 'normal' | 'tag';
+    };
+    value?: {
+        type: null;
+        value?: string | number | Array<string | number>;
+    };
+    defaultValue?: {
+        type: null;
+        value?: string | number | Array<string | number>;
+    };
+}
+export interface TdTabBarItemProps {
+    badgeProps?: {
+        type: ObjectConstructor;
+        value?: BadgeProps;
+    };
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    icon?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    style?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    subTabBar?: {
+        type: ArrayConstructor;
+        value?: SubTabBarItem[];
+    };
+    value?: {
+        type: null;
+        value?: string | number;
+    };
+}
+export interface SubTabBarItem {
+    value: string;
+    label: string;
+}

miniprogram_npm/tdesign-miniprogram/tab-bar/type.js

@@ -0,0 +1 @@
+export {};