更新：登录功能

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

@@ -0,0 +1,150 @@
+<template>
+  <view
+    v-if="currentStatus"
+    :class="`wd-step ${customClass} ${currentStatus ? 'is-' + currentStatus : ''} ${canAlignCenter ? 'is-center' : ''}  ${
+      vertical ? 'is-vertical' : ''
+    }`"
+    :style="rootStyle"
+  >
+    <view :class="`wd-step__header  ${dot ? 'is-dot' : ''}`">
+      <view :class="`wd-step__icon  ${dot ? 'is-dot' : !!icon || $slots.icon ? 'is-icon' : 'is-text'}`">
+        <view v-if="dot" class="wd-step__dot"></view>
+        <slot v-else-if="$slots.icon" name="icon" />
+        <wd-icon v-else-if="icon" custom-class="wd-step__icon-inner" :name="icon" />
+        <view v-else class="wd-step__icon-outer">
+          <wd-icon v-if="currentStatus === 'finished'" name="check-bold" />
+          <wd-icon v-else-if="currentStatus === 'error'" name="close-bold" />
+          <text v-else>{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view v-if="index < childrenLength - 1" class="wd-step__line"></view>
+    </view>
+    <view class="wd-step__content">
+      <view :class="`wd-step__title ${$slots.description || description ? 'is-description' : ''}`">
+        <slot v-if="$slots.title" name="title" />
+        <text v-else>{{ currentTitle }}</text>
+      </view>
+      <view v-if="$slots.description || description" class="wd-step__description">
+        <slot v-if="$slots.description" name="description" />
+        <text v-else>{{ description }}</text>
+      </view>
+    </view>
+  </view>
+</template>
+<script lang="ts">
+export default {
+  name: 'wd-step',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+<script lang="ts" setup>
+import wdIcon from '../wd-icon/wd-icon.vue'
+import { computed } from 'vue'
+import { useParent } from '../composables/useParent'
+import { STEPS_KEY } from '../wd-steps/types'
+import { isDef, objToStyle } from '../common/util'
+import { useTranslate } from '../composables/useTranslate'
+import { stepProps } from './types'
+import type { CSSProperties } from 'vue'
+
+const props = defineProps(stepProps)
+
+const { parent: steps, index } = useParent(STEPS_KEY)
+
+const { translate } = useTranslate('steps')
+
+const currentStatus = computed(() => {
+  return getCurrentStatus(index.value)
+})
+
+const currentTitle = computed(() => {
+  return getCurrentTitle(currentStatus.value)
+})
+const rootStyle = computed(() => {
+  const style: CSSProperties = {}
+  if (steps) {
+    const { vertical, space } = steps.props
+    if (vertical) {
+      if (isDef(space)) {
+        style['height'] = space
+      }
+    } else {
+      style['width'] = space || 100 / steps.children.length + '%'
+    }
+  }
+  return `${objToStyle(style)}${props.customStyle}`
+})
+
+const canAlignCenter = computed(() => {
+  if (isDef(steps)) {
+    const { vertical, alignCenter } = steps.props
+    return Boolean(!vertical && alignCenter)
+  } else {
+    return false
+  }
+})
+
+const vertical = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.vertical)
+  } else {
+    return false
+  }
+})
+const dot = computed(() => {
+  if (isDef(steps)) {
+    return Boolean(steps.props.dot)
+  } else {
+    return false
+  }
+})
+
+const childrenLength = computed(() => {
+  if (isDef(steps)) {
+    return Number(steps.children.length)
+  } else {
+    return 0
+  }
+})
+
+function getCurrentStatus(index: number) {
+  if (props.status) {
+    return props.status
+  }
+
+  if (steps) {
+    const { active } = steps.props
+    if (Number(active) > index) {
+      return 'finished'
+    } else if (Number(active) === index) {
+      return 'process'
+    } else {
+      return 'wait'
+    }
+  } else {
+    return 'wait'
+  }
+}
+function getCurrentTitle(currentStatus: string) {
+  if (props.title) return props.title
+
+  switch (currentStatus) {
+    case 'finished':
+      return translate('finished')
+    case 'error':
+      return translate('failed')
+    case 'process':
+      return translate('process')
+    case 'wait':
+    default:
+      return translate('wait')
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>