更新：登录功能

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

@@ -0,0 +1,63 @@
+@import './../common/abstracts/_mixin.scss';
+@import './../common/abstracts/variable.scss';
+
+.wot-theme-dark {
+  @include b(badge) {
+    @include e(content) {
+      border-color: $-dark-background2;
+    }
+  }
+}
+
+
+@include b(badge) {
+  position: relative;
+  vertical-align: middle;
+  display: inline-block;
+
+  @include e(content) {
+    display: inline-block;
+    box-sizing: content-box;
+    height: $-badge-height;
+    line-height: $-badge-height;
+    padding: $-badge-padding;
+    background-color: $-badge-bg;
+    border-radius: calc($-badge-height / 2 + 2px);
+    color: $-badge-color;
+    font-size: $-badge-fs;
+    text-align: center;
+    white-space: nowrap;
+    border: $-badge-border;
+    font-weight: 500;
+
+    @include when(fixed) {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      transform: translateY(-50%) translateX(50%);
+    }
+
+    @include when(dot) {
+      height: $-badge-dot-size;
+      width: $-badge-dot-size;
+      padding: 0;
+      border-radius: 50%;
+    }
+
+    @each $type in (primary, success, warning, info, danger) {
+      @include m($type) {
+        @if $type == primary {
+          background-color: $-badge-primary;
+        } @else if $type == success {
+          background-color: $-badge-success;
+        } @else if $type == warning {
+          background-color: $-badge-warning;
+        } @else if $type == info {
+          background-color: $-badge-info;
+        } @else {
+          background-color: $-badge-danger;
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,50 @@
+/*
+ * @Author: weisheng
+ * @Date: 2024-03-15 11:36:12
+ * @LastEditTime: 2024-11-20 20:29:03
+ * @LastEditors: weisheng
+ * @Description:
+ * @FilePath: /wot-design-uni/src/uni_modules/wot-design-uni/components/wd-badge/types.ts
+ * 记得注释
+ */
+import type { ExtractPropTypes, PropType } from 'vue'
+import { baseProps, makeBooleanProp, makeStringProp, numericProp } from '../common/props'
+
+export type BadgeType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+
+export const badgeProps = {
+  ...baseProps,
+  /**
+   * 显示值
+   */
+  modelValue: numericProp,
+  /** 当数值为 0 时，是否展示徽标 */
+  showZero: makeBooleanProp(false),
+  bgColor: String,
+  /**
+   * 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型
+   */
+  max: Number,
+  /**
+   * 是否为红色点状标注
+   */
+  isDot: Boolean,
+  /**
+   * 是否隐藏 badge
+   */
+  hidden: Boolean,
+  /**
+   * badge类型，可选值primary / success / warning / danger / info
+   */
+  type: makeStringProp<BadgeType | undefined>(undefined),
+  /**
+   * 为正时，角标向下偏移对应的像素
+   */
+  top: numericProp,
+  /**
+   * 为正时，角标向左偏移对应的像素
+   */
+  right: numericProp
+}
+
+export type BadgeProps = ExtractPropTypes<typeof badgeProps>

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

@@ -0,0 +1,61 @@
+<template>
+  <view :class="['wd-badge', customClass]" :style="customStyle">
+    <slot></slot>
+    <view
+      v-if="shouldShowBadge"
+      :class="['wd-badge__content', 'is-fixed', type ? 'wd-badge__content--' + type : '', isDot ? 'is-dot' : '']"
+      :style="contentStyle"
+    >
+      {{ content }}
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-badge',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import { computed, type CSSProperties } from 'vue'
+import { badgeProps } from './types'
+import { addUnit, isDef, isNumber, objToStyle } from '../common/util'
+
+const props = defineProps(badgeProps)
+const content = computed(() => {
+  const { modelValue, max, isDot } = props
+  if (isDot) return ''
+  let value = modelValue
+  if (value && max && isNumber(value) && !Number.isNaN(value) && !Number.isNaN(max)) {
+    value = max < value ? `${max}+` : value
+  }
+  return value
+})
+
+const contentStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (isDef(props.bgColor)) {
+    style.backgroundColor = props.bgColor
+  }
+
+  if (isDef(props.top)) {
+    style.top = addUnit(props.top)
+  }
+
+  if (isDef(props.right)) {
+    style.right = addUnit(props.right)
+  }
+  return objToStyle(style)
+})
+
+// 是否展示徽标数字
+const shouldShowBadge = computed(() => !props.hidden && (content.value || (content.value === 0 && props.showZero) || props.isDot))
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>