更新：登录功能

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

@@ -0,0 +1,97 @@
+@import '../common/abstracts/variable';
+@import '../common/abstracts/mixin';
+
+.wot-theme-dark {
+  @include b(sidebar-item) {
+    background: $-dark-background2;
+    color: $-dark-color;
+
+    &:active {
+      background-color: $-dark-background4;
+    }
+
+    @include m(active) {
+      background: $-dark-background;
+      color: $-sidebar-active-color;
+    }
+
+    @include m(disabled) {
+      color: $-dark-color-gray;
+  
+      &:active {
+        background-color: $-dark-background2;
+      }
+    }
+  }
+
+}
+
+@include b(sidebar-item) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 32rpx;
+  font-size: $-sidebar-font-size;
+  color: $-sidebar-color;
+  background: $-sidebar-bg;
+  min-height: $-sidebar-item-height;
+  box-sizing: border-box;
+  white-space: wrap;
+  line-height: $-sidebar-item-line-height;
+
+  &:active {
+    background-color: $-sidebar-hover-bg;
+  }
+
+  @include m(active) {
+    font-weight: 600;
+    background: $-sidebar-active-bg;
+    color: $-sidebar-active-color;
+
+    &::before {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      width: $-sidebar-active-border-width;
+      height: $-sidebar-active-border-height;
+      background: $-sidebar-active-color;
+      transform: translateY(-50%);
+      content: '';
+      border-radius: $-sidebar-active-border-width;
+    }
+
+    &:active {
+      background-color: transparent;
+    }
+  }
+
+  @include m(prefix) {
+    border-bottom-right-radius: $-sidebar-border-radius;
+  }
+
+  @include m(suffix) {
+    border-top-right-radius: $-sidebar-border-radius;
+  }
+
+
+  @include m(disabled) {
+    color: $-sidebar-disabled-color;
+    cursor: not-allowed;
+
+    &:active {
+      background-color: $-sidebar-bg;
+    }
+  }
+
+  @include edeep(badge) {
+    z-index: 2;
+    word-break: break-all;
+  }
+
+  @include edeep(icon) {
+    font-size: $-sidebar-icon-size;
+    margin-right: 2px;
+  }
+
+}

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

@@ -0,0 +1,31 @@
+import type { ExtractPropTypes, Prop, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeNumberProp, makeRequiredProp } from '../common/props'
+import type { BadgeProps } from '../wd-badge/types'
+
+export const sidebarItemProps = {
+  ...baseProps,
+  /** 当前选项标题 */
+  label: makeRequiredProp(String),
+  /** 当前选项的值，唯一标识 */
+  value: makeRequiredProp([Number, String]),
+  /** 徽标显示值 */
+  badge: {
+    type: [String, Number, null] as PropType<string | number | null>,
+    default: null
+  },
+  /** 徽标属性，透传给 Badge 组件 */
+  badgeProps: Object as PropType<Partial<BadgeProps>>,
+  /** 图标 */
+  icon: String,
+  /** 是否点状徽标 */
+  isDot: {
+    type: Boolean,
+    default: undefined
+  },
+  /** 徽标最大值 */
+  max: Number,
+  /** 是否禁用 */
+  disabled: makeBooleanProp(false)
+}
+
+export type SidebarItemProps = ExtractPropTypes<typeof sidebarItemProps>

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

@@ -0,0 +1,116 @@
+<template>
+  <view
+    @click="handleClick"
+    :class="`wd-sidebar-item ${active ? 'wd-sidebar-item--active' : ''} ${prefix ? 'wd-sidebar-item--prefix' : ''}  ${
+      suffix ? 'wd-sidebar-item--suffix' : ''
+    } ${disabled ? 'wd-sidebar-item--disabled' : ''} ${customClass}`"
+    :style="customStyle"
+  >
+    <slot name="icon"></slot>
+    <template v-if="!$slots.icon && icon">
+      <wd-icon custom-class="wd-sidebar-item__icon" :name="icon"></wd-icon>
+    </template>
+    <wd-badge v-bind="customBadgeProps" custom-class="wd-sidebar-item__badge">
+      {{ label }}
+    </wd-badge>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'wd-sidebar-item',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import wdBadge from '../wd-badge/wd-badge.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { SIDEBAR_KEY } from '../wd-sidebar/types'
+import { sidebarItemProps } from './types'
+import type { BadgeProps } from '../wd-badge/types'
+import { deepAssign, isDef, isUndefined, omitBy } from '../common/util'
+
+const props = defineProps(sidebarItemProps)
+
+const { parent: sidebar } = useParent(SIDEBAR_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.badge
+      },
+      isUndefined
+    )
+  )
+  if (!isDef(badgeProps.max)) {
+    badgeProps.max = 99
+  }
+  return badgeProps
+})
+
+const active = computed(() => {
+  let active: boolean = false
+  if (sidebar && sidebar.props.modelValue === props.value) {
+    active = true
+  }
+  return active
+})
+
+const prefix = computed(() => {
+  let prefix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex - 1) {
+      prefix = true
+    }
+  }
+  return prefix
+})
+
+const suffix = computed(() => {
+  let suffix: boolean = false
+  if (sidebar) {
+    let activeIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === sidebar.props.modelValue
+    })
+
+    let currentIndex: number = sidebar.children.findIndex((c: any) => {
+      return c.value === props.value
+    })
+
+    if (currentIndex === activeIndex + 1) {
+      suffix = true
+    }
+  }
+  return suffix
+})
+
+function handleClick() {
+  if (props.disabled) {
+    return
+  }
+  sidebar && sidebar.setChange(props.value, props.label)
+}
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>