@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-step/dd-step.vue

@@ -0,0 +1,188 @@
+<template>
+  <view class="dd-step" :class="[`dd-step--${direction}`, `dd-step--${status}`]">
+    <template v-if="direction === 'horizontal'">
+      <view class="dd-step__head">
+        <view
+          v-if="!isLast"
+          class="dd-step__line"
+          :class="{ 'dd-step__line--first': isFirst }"
+          :style="lineStyle"
+        ></view>
+        <view class="dd-step__circle" :style="circleStyle">
+          <dd-icon v-if="status === 'finish'" name="success" class="dd-step__circle-text" />
+          <text v-else class="dd-step__circle-text">{{ index + 1 }}</text>
+        </view>
+      </view>
+      <view class="dd-step__content">
+        <text class="dd-step__title">{{ title }}</text>
+        <text v-if="description" class="dd-step__desc">{{ description }}</text>
+      </view>
+    </template>
+
+    <template v-else>
+      <view class="dd-step__head dd-step__head--vertical">
+        <view class="dd-step__circle" :style="circleStyle">
+          <dd-icon v-if="status === 'finish'" name="success" class="dd-step__circle-text" />
+          <text v-else class="dd-step__circle-text">{{ index + 1 }}</text>
+        </view>
+        <view
+          v-if="!isLast"
+          class="dd-step__line dd-step__line--vertical"
+          :style="lineStyle"
+        ></view>
+      </view>
+      <view class="dd-step__content dd-step__content--vertical">
+        <text class="dd-step__title">{{ title }}</text>
+        <text v-if="description" class="dd-step__desc">{{ description }}</text>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+type StepStatus = 'wait' | 'process' | 'finish'
+
+interface Props {
+  title?: string
+  description?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  description: '',
+})
+
+const ctx = inject<any>('ddSteps', null)
+const index = ctx ? ctx.register() : 0
+
+const direction = computed<'horizontal' | 'vertical'>(() =>
+  ctx ? ctx.direction.value : 'horizontal'
+)
+
+const status = computed<StepStatus>(() => {
+  if (!ctx) return 'wait'
+  const active = ctx.active.value
+  if (index < active) return 'finish'
+  if (index === active) return 'process'
+  return 'wait'
+})
+
+const isLast = computed(() => (ctx ? index === ctx.count.value - 1 : true))
+const isFirst = computed(() => index === 0)
+
+const activeColor = computed(() => (ctx ? ctx.activeColor.value : '#F5A623'))
+const inactiveColor = computed(() => (ctx ? ctx.inactiveColor.value : '#9E9E9E'))
+
+const isActive = computed(() => status.value === 'finish' || status.value === 'process')
+
+const circleStyle = computed(() => ({
+  background: isActive.value ? activeColor.value : '#2A2A2A',
+  color: isActive.value ? '#FFFFFF' : inactiveColor.value,
+}))
+
+// ponytail: 水平连接线整段按本步骤 status 着色，current/首个 wait 左半段颜色为近似值
+const lineStyle = computed(() => ({
+  background: status.value === 'finish' ? activeColor.value : inactiveColor.value,
+}))
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-step {
+  &--horizontal {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    min-width: 0;
+  }
+
+  &__head {
+    position: relative;
+    width: 100%;
+    height: 40rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &--vertical {
+      width: 40rpx;
+      height: auto;
+      flex-direction: column;
+      align-self: stretch;
+    }
+  }
+
+  &__line {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: 1px;
+    transform: translateY(-50%);
+    z-index: 0;
+
+    &--first {
+      left: 50%;
+    }
+
+    &--vertical {
+      position: static;
+      transform: none;
+      width: 1px;
+      flex: 1;
+      min-height: 32rpx;
+      margin: 8rpx 0;
+    }
+  }
+
+  &__circle {
+    position: relative;
+    z-index: 1;
+    width: 40rpx;
+    height: 40rpx;
+    border-radius: $dd-radius-full;
+    @include dd-flex-center;
+    flex-shrink: 0;
+    @include dd-transition(all 0.3s ease);
+  }
+
+  &__circle-text {
+    font-size: 20rpx; // font-size-xs
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__content {
+    text-align: center;
+    margin-top: 8rpx;
+
+    &--vertical {
+      text-align: left;
+      flex: 1;
+      padding-bottom: 32rpx;
+      padding-left: 8rpx;
+      margin-top: 0;
+    }
+  }
+
+  &__title {
+    font-size: $dd-font-size-caption;
+    color: $dd-text-primary;
+    line-height: $dd-line-height-caption;
+  }
+
+  &__desc {
+    display: block;
+    margin-top: 4rpx;
+    font-size: 20rpx;
+    color: $dd-text-tertiary;
+    line-height: 1.4;
+  }
+}
+</style>

package/components/dd-stepper/dd-stepper.vue

@@ -0,0 +1,171 @@
+<template>
+  <view class="dd-stepper" :class="[`dd-stepper--${size}`, { 'dd-stepper--disabled': disabled }]">
+    <view
+      class="dd-stepper__btn dd-stepper__minus"
+      :class="{ 'dd-stepper__btn--disabled': minusDisabled }"
+      :hover-class="!minusDisabled ? 'dd-stepper__btn--active' : ''"
+      @click="onMinus"
+    >
+      <dd-icon name="minus" class="dd-stepper__icon" />
+    </view>
+    <text class="dd-stepper__value">{{ modelValue }}</text>
+    <view
+      class="dd-stepper__btn dd-stepper__plus"
+      :class="{ 'dd-stepper__btn--disabled': plusDisabled }"
+      :hover-class="!plusDisabled ? 'dd-stepper__btn--active' : ''"
+      @click="onPlus"
+    >
+      <dd-icon name="plus" class="dd-stepper__icon" />
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  size?: 'md' | 'sm'
+  disabled?: boolean
+  disablePlus?: boolean
+  disableMinus?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 1,
+  min: 1,
+  max: 99,
+  step: 1,
+  size: 'md',
+  disabled: false,
+  disablePlus: false,
+  disableMinus: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+  (e: 'plus'): void
+  (e: 'minus'): void
+  (e: 'overlimit', val: 'plus' | 'minus'): void
+}>()
+
+const minusDisabled = computed(() => props.disabled || props.disableMinus || props.modelValue <= props.min)
+const plusDisabled = computed(() => props.disabled || props.disablePlus || props.modelValue >= props.max)
+
+function clamp(val: number) {
+  return Math.max(props.min, Math.min(props.max, val))
+}
+
+function onMinus() {
+  emit('minus')
+  if (minusDisabled.value) {
+    emit('overlimit', 'minus')
+    return
+  }
+  const next = clamp(props.modelValue - props.step)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+function onPlus() {
+  emit('plus')
+  if (plusDisabled.value) {
+    emit('overlimit', 'plus')
+    return
+  }
+  const next = clamp(props.modelValue + props.step)
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-stepper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8rpx;
+  padding: 4rpx;
+  background: $dd-neutral-800;
+  border: 1px solid $dd-neutral-700;
+  border-radius: $dd-radius-full;
+  box-sizing: border-box;
+
+  &__btn {
+    @include dd-flex-center;
+    flex-shrink: 0;
+    border-radius: 50%;
+    background: $dd-gradient-primary-wide;
+    @include dd-transition(transform 0.1s ease, opacity 0.2s);
+
+    &--active {
+      transform: scale(0.9);
+    }
+
+    &--disabled {
+      background: $dd-neutral-800;
+      @include dd-no-touch;
+      .dd-stepper__icon {
+        color: $dd-neutral-500;
+        opacity: 0.4;
+      }
+    }
+  }
+
+  &__icon {
+    color: $dd-neutral-900;
+    font-weight: 700;
+    line-height: 1;
+  }
+
+  &__value {
+    text-align: center;
+    color: $dd-neutral-50;
+    font-weight: 700;
+    line-height: 1;
+    @include dd-ellipsis(1);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+}
+
+.dd-stepper--md {
+  height: 72rpx;
+  .dd-stepper__btn {
+    width: 56rpx;
+    height: 56rpx;
+  }
+  .dd-stepper__icon {
+    font-size: 32rpx;
+  }
+  .dd-stepper__value {
+    min-width: 80rpx;
+    font-size: 32rpx;
+  }
+}
+
+.dd-stepper--sm {
+  height: 56rpx;
+  .dd-stepper__btn {
+    width: 44rpx;
+    height: 44rpx;
+  }
+  .dd-stepper__icon {
+    font-size: 26rpx;
+  }
+  .dd-stepper__value {
+    min-width: 64rpx;
+    font-size: 28rpx;
+  }
+}
+</style>

package/components/dd-steps/dd-steps.vue

@@ -0,0 +1,61 @@
+<template>
+  <view class="dd-steps" :class="[`dd-steps--${direction}`]">
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+interface Props {
+  /** 当前激活步骤 (0-indexed) */
+  active?: number
+  direction?: 'horizontal' | 'vertical'
+  activeColor?: string
+  inactiveColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  active: 0,
+  direction: 'horizontal',
+  activeColor: '',
+  inactiveColor: '',
+})
+
+const count = ref(0)
+
+// ponytail: register 依赖子组件 setup 执行顺序 (父→子，Vue 一般稳定)
+function register(): number {
+  const idx = count.value
+  count.value += 1
+  return idx
+}
+
+provide('ddSteps', {
+  active: computed(() => props.active),
+  direction: computed(() => props.direction),
+  activeColor: computed(() => props.activeColor || '#F5A623'),
+  inactiveColor: computed(() => props.inactiveColor || '#9E9E9E'),
+  count,
+  register,
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-steps {
+  width: 100%;
+
+  &--horizontal {
+    display: flex;
+    align-items: flex-start;
+  }
+
+  &--vertical {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

package/components/dd-sticky/dd-sticky.vue

@@ -0,0 +1,132 @@
+<template>
+  <view
+    class="dd-sticky"
+    :class="{ 'dd-sticky--disabled': disabled }"
+    :style="stickyStyle"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, onMounted, onUnmounted, ref } from 'vue'
+
+interface Props {
+  offsetTop?: number // rpx
+  zIndex?: number
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  offsetTop: 0,
+  zIndex: 99,
+  disabled: false,
+})
+
+const emit = defineEmits<{ (e: 'change', val: { isFixed: boolean; scrollTop: number }): void }>()
+
+const isFixed = ref(false)
+
+const stickyStyle = computed(() => {
+  if (props.disabled) {
+    return { position: 'static' as const, top: 'auto' }
+  }
+  return {
+    position: 'sticky' as const,
+    top: `${props.offsetTop}rpx`,
+    zIndex: props.zIndex,
+    width: '100%',
+  }
+})
+
+let observer: any = null
+const instance = getCurrentInstance()
+
+function rpxToPx(rpx: number): number {
+  try {
+    const info = uni.getWindowInfo()
+    return (rpx / 750) * info.windowWidth
+  } catch {
+    return rpx / 2
+  }
+}
+
+onMounted(() => {
+  if (props.disabled) return
+  // #ifdef H5
+  setupH5Observer()
+  // #endif
+  // #ifndef H5
+  setupMPObserver()
+  // #endif
+})
+
+// H5: 使用原生 IntersectionObserver API
+function setupH5Observer() {
+  // #ifdef H5
+  const el = document.querySelector('.dd-sticky')
+  if (!el) return
+  const px = rpxToPx(props.offsetTop)
+  const io = new IntersectionObserver(
+    (entries) => {
+      const entry = entries[0]
+      const fixed = entry.boundingClientRect.top <= px + 1
+      if (fixed !== isFixed.value) {
+        isFixed.value = fixed
+        emit('change', { isFixed: fixed, scrollTop: window.scrollY })
+      }
+    },
+    { rootMargin: `-${px}px 0px 0px 0px`, threshold: [0, 1] }
+  )
+  io.observe(el)
+  observer = io
+  // #endif
+}
+
+// MP/App: 使用 uni IntersectionObserver, 需传入组件实例
+function setupMPObserver() {
+  // #ifndef H5
+  const px = rpxToPx(props.offsetTop)
+  const obs = uni.createIntersectionObserver(instance, {
+    thresholds: [0, 1],
+  })
+  obs.relativeToViewport({ top: -px, bottom: 0 })
+  obs.observe('.dd-sticky', (res: any) => {
+    const fixed = res.boundingClientRect.top <= px + 1
+    if (fixed !== isFixed.value) {
+      isFixed.value = fixed
+      emit('change', { isFixed: fixed, scrollTop: 0 })
+    }
+  })
+  observer = obs
+  // #endif
+}
+
+onUnmounted(() => {
+  if (observer) {
+    // #ifdef H5
+    observer.disconnect()
+    // #endif
+    // #ifndef H5
+    observer.disconnect()
+    // #endif
+    observer = null
+  }
+})
+
+defineExpose({ isFixed })
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-sticky {
+  font-family: $dd-font-body;
+
+  &--disabled {
+    position: static;
+    top: auto;
+  }
+}
+</style>

package/components/dd-swipe/dd-swipe.vue

@@ -0,0 +1,146 @@
+<template>
+  <view class="dd-swipe" :style="boxStyle">
+    <swiper
+      class="dd-swipe__swiper"
+      :autoplay="autoplay > 0"
+      :interval="autoplay"
+      :duration="duration"
+      :circular="loop"
+      :vertical="vertical"
+      :touchable="touchable"
+      :current="current"
+      @change="onChange"
+    >
+      <slot></slot>
+    </swiper>
+    <slot name="indicator" :active="current" :count="count">
+      <view v-if="showIndicators && count > 1" class="dd-swipe__indicators" :class="`dd-swipe__indicators--${vertical ? 'vertical' : 'horizontal'}`">
+        <view
+          v-for="i in count"
+          :key="i"
+          class="dd-swipe__dot"
+          :class="{ 'dd-swipe__dot--active': i - 1 === current }"
+          :style="dotStyle(i - 1)"
+          @click="jumpTo(i - 1)"
+        ></view>
+      </view>
+    </slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+interface Props {
+  width?: string
+  height?: string
+  autoplay?: number
+  loop?: boolean
+  vertical?: boolean
+  duration?: number
+  touchable?: boolean
+  showIndicators?: boolean
+  indicatorColor?: string
+  initial?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  width: '100%',
+  height: '300rpx',
+  autoplay: 0,
+  loop: true,
+  vertical: false,
+  duration: 500,
+  touchable: true,
+  showIndicators: true,
+  indicatorColor: '',
+  initial: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'change', index: number): void
+}>()
+
+const current = ref(props.initial)
+const count = ref(0)
+
+const boxStyle = computed(() => ({ width: props.width, height: props.height }))
+
+const activeColor = computed(() => props.indicatorColor || '#F5A623')
+
+function dotStyle(index: number) {
+  return index === current.value
+    ? { background: activeColor.value }
+    : {}
+}
+
+// provide/inject: dd-swipe-item 挂载时自注册以统计轮播项数量
+provide('ddSwipe', {
+  register() {
+    count.value++
+  },
+  unregister() {
+    count.value = Math.max(0, count.value - 1)
+  },
+})
+
+function onChange(e: any) {
+  const idx = e?.detail?.current ?? 0
+  current.value = idx
+  emit('change', idx)
+}
+
+function jumpTo(index: number) {
+  current.value = index
+}
+
+defineExpose({ jumpTo, current })
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-swipe {
+  position: relative;
+  overflow: hidden;
+
+  &__swiper {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__indicators {
+    position: absolute;
+    display: flex;
+    z-index: 2;
+
+    &--horizontal {
+      bottom: $dd-space-3;
+      left: 50%;
+      transform: translateX(-50%);
+      flex-direction: row;
+      gap: $dd-space-1;
+    }
+    &--vertical {
+      right: $dd-space-3;
+      top: 50%;
+      transform: translateY(-50%);
+      flex-direction: column;
+      gap: $dd-space-1;
+    }
+  }
+
+  &__dot {
+    width: 12rpx;
+    height: 12rpx;
+    border-radius: $dd-radius-full;
+    background: rgba(255, 255, 255, 0.5);
+    @include dd-transition(background 0.3s ease);
+
+    &--active {
+      background: $dd-primary-500;
+    }
+  }
+}
+</style>