更新：登录功能

uni_modules/wot-design-uni/components/wd-tabbar-item/index.scss

@@ -0,0 +1,55 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(tabbar-item) {
+    @include e(body) {
+      :deep(){
+        @include when(inactive) {
+          color: $-dark-color-gray;
+        }
+      }
+    }
+  }
+}
+
+
+@include b(tabbar-item) {
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @include e(body) {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    line-height: 1;
+    padding: 0;
+    position: relative;
+    
+    :deep(){
+      @include when(active) {
+        color: $-tabbar-active-color;
+      }
+  
+      @include when(inactive) {
+        color: $-tabbar-inactive-color;
+      }
+    }
+  }
+
+
+  @include e(body-title) {
+    font-size: $-tabbar-item-title-font-size;
+    line-height: $-tabbar-item-title-line-height;
+  }
+
+  @include edeep(body-icon) {
+    font-size: $-tabbar-item-icon-size;
+  }
+  
+}

uni_modules/wot-design-uni/components/wd-tabbar-item/types.ts

@@ -0,0 +1,51 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeNumberProp, numericProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+/**
+ * 折叠面板子项
+ */
+export interface TabbarItem {
+  // 唯一标识
+  name: string | number
+}
+
+export const tabbarItemProps = {
+  ...baseProps,
+  /**
+   * 标签页的标题
+   */
+  title: String,
+  /**
+   * 唯一标识符
+   */
+  name: numericProp,
+  /**
+   * 图标
+   */
+  icon: String,
+  /**
+   * 徽标显示值
+   */
+  value: {
+    type: [Number, String, null] as PropType<number | string | null>,
+    default: null
+  },
+  /**
+   * 是否点状徽标
+   */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /**
+   * 徽标最大值
+   */
+  max: Number,
+  /**
+   * 徽标属性，透传给 Badge 组件
+   */
+  badgeProps: Object as PropType<BadgeProps>
+}
+
+export type TabbarItemProps = ExtractPropTypes<typeof tabbarItemProps>

uni_modules/wot-design-uni/components/wd-tabbar-item/wd-tabbar-item.vue

@@ -0,0 +1,99 @@
+<template>
+  <view :class="`wd-tabbar-item ${customClass}`" :style="customStyle" @click="handleClick">
+    <wd-badge v-bind="customBadgeProps">
+      <view class="wd-tabbar-item__body">
+        <slot name="icon" :active="active"></slot>
+        <template v-if="!$slots.icon && icon">
+          <wd-icon
+            :name="icon"
+            :custom-style="textStyle"
+            :custom-class="`wd-tabbar-item__body-icon ${active ? 'is-active' : 'is-inactive'}`"
+          ></wd-icon>
+        </template>
+        <text v-if="title" :style="textStyle" :class="`wd-tabbar-item__body-title ${active ? 'is-active' : 'is-inactive'}`">
+          {{ title }}
+        </text>
+      </view>
+    </wd-badge>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-tabbar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdBadge from '../wd-badge/wd-badge.vue'
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { type CSSProperties, computed } from 'vue'
+import { deepAssign, isDef, isUndefined, objToStyle, omitBy } from '../common/util'
+import { useParent } from '../composables/useParent'
+import { TABBAR_KEY } from '../wd-tabbar/types'
+import { tabbarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+
+const props = defineProps(tabbarItemProps)
+
+const { parent: tabbar, index } = useParent(TABBAR_KEY)
+
+const customBadgeProps = computed(() => {
+  const badgeProps: Partial<BadgeProps> = deepAssign(
+    isDef(props.badgeProps) ? omitBy(props.badgeProps, isUndefined) : {},
+    omitBy(
+      {
+        max: props.max,
+        isDot: props.isDot,
+        modelValue: props.value
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const textStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (tabbar) {
+    if (active.value && tabbar.props.activeColor) {
+      style['color'] = tabbar.props.activeColor
+    }
+    if (!active.value && tabbar.props.inactiveColor) {
+      style['color'] = tabbar.props.inactiveColor
+    }
+  }
+
+  return `${objToStyle(style)}`
+})
+
+const active = computed(() => {
+  const name = isDef(props.name) ? props.name : index.value
+  if (tabbar) {
+    if (tabbar.props.modelValue === name) {
+      return true
+    } else {
+      return false
+    }
+  } else {
+    return false
+  }
+})
+
+/**
+ * 点击tabbar选项
+ */
+function handleClick() {
+  const name: string | number = isDef(props.name) ? props.name : index.value
+  tabbar && tabbar.setChange({ name })
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>