更新：登录功能

uni_modules/wot-design-uni/components/wd-tab/index.scss

@@ -0,0 +1,16 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+
+@include b(tab) {
+  width: 100%;
+  flex-shrink: 0;
+  box-sizing: border-box;
+
+  @include e(body) {
+    @include m(inactive) {
+      height: 0;
+      transition: height 0.3s ease-in-out;
+    }
+  }
+}

uni_modules/wot-design-uni/components/wd-tab/types.ts

@@ -0,0 +1,30 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const tabProps = {
+  ...baseProps,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * tab的标题
+   */
+  title: String,
+  /**
+   *  是否禁用，无法点击
+   */
+  disabled: makeBooleanProp(false),
+  /**
+   * 是否懒加载，切换到该tab时才加载内容
+   * @default true
+   */
+  lazy: makeBooleanProp(true),
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<Partial<BadgeProps>>
+}
+
+export type TabProps = ExtractPropTypes<typeof tabProps>

uni_modules/wot-design-uni/components/wd-tab/wd-tab.vue

@@ -0,0 +1,88 @@
+<template>
+  <view :class="`wd-tab ${customClass}`" :style="customStyle">
+    <view :class="['wd-tab__body', { 'wd-tab__body--inactive': !active }]" v-if="shouldBeRender" :style="tabBodyStyle">
+      <slot />
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tab',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { getCurrentInstance, ref, watch, type CSSProperties } from 'vue'
+import { isDef, isNumber, isString, objToStyle } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABS_KEY } from '../wd-tabs/types'
+import { computed } from 'vue'
+import { tabProps } from './types'
+
+const props = defineProps(tabProps)
+
+const { proxy } = getCurrentInstance() as any
+const { parent: tabs, index } = useParent(TABS_KEY)
+
+// 激活项下标
+const active = computed(() => {
+  return isDef(tabs) ? tabs.state.activeIndex === index.value : false
+})
+
+const painted = ref<boolean>(active.value) // 初始状态tab不会渲染，必须通过tabs来设置painted使tab渲染
+
+const tabBodyStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (!active.value && (!isDef(tabs) || !tabs.props.animated)) {
+    style.display = 'none'
+  }
+  return objToStyle(style)
+})
+
+const shouldBeRender = computed(() => !props.lazy || painted.value || active.value)
+
+watch(active, (val) => {
+  if (val) painted.value = true
+})
+
+watch(
+  () => props.name,
+  (newValue) => {
+    if (isDef(newValue) && !isNumber(newValue) && !isString(newValue)) {
+      console.error('[wot ui] error(wd-tab): the type of name should be number or string')
+      return
+    }
+    if (tabs) {
+      checkName(proxy)
+    }
+  },
+  {
+    deep: true,
+    immediate: true
+  }
+)
+
+/**
+ * @description 检测tab绑定的name是否和其它tab的name冲突
+ * @param {Object} self 自身
+ */
+function checkName(self: any) {
+  const { name: myName } = props
+  if (myName === undefined || myName === null || myName === '') {
+    return
+  }
+  tabs &&
+    tabs.children.forEach((child: any) => {
+      if (child.$.uid !== self.$.uid && child.name === myName) {
+        console.error(`The tab's bound value: ${myName} has been used`)
+      }
+    })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>