@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-popover-item/dd-popover-item.vue

@@ -0,0 +1,88 @@
+<template>
+  <view
+    class="dd-popover-item"
+    :class="{ 'dd-popover-item--disabled': disabled }"
+    :style="itemStyle"
+    @click="onClick"
+  >
+    <dd-icon v-if="icon" :name="icon" class="dd-popover-item__icon" />
+    <text class="dd-popover-item__text">{{ text }}</text>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  text?: string
+  icon?: string
+  value?: any
+  disabled?: boolean
+  color?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  text: '',
+  icon: '',
+  value: undefined,
+  disabled: false,
+  color: '',
+})
+
+const emit = defineEmits<{
+  (e: 'click', value: any): void
+}>()
+
+// inject 父级 dd-popover 的点击中继；不在 dd-popover 内时为 null，点击静默忽略
+const popover = inject<{ onSelect: (value: any) => void } | null>('ddPopover', null)
+
+const itemStyle = computed(() => (props.color ? { color: props.color } : {}))
+
+function onClick() {
+  if (props.disabled) return
+  emit('click', props.value)
+  popover?.onSelect(props.value)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-popover-item {
+  display: flex;
+  align-items: center;
+  height: 80rpx;
+  padding: 0 32rpx;
+  gap: 16rpx;
+  color: inherit;
+  background: transparent;
+  @include dd-transition(background 0.15s ease);
+
+  // 首项不显示顶部分隔线，其余项之间用 hairline 分隔
+  &:not(:first-child) {
+    @include dd-hairline-top($dd-border-default);
+  }
+
+  &:active {
+    background: $dd-surface-container;
+  }
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+
+  &__icon {
+    font-size: 32rpx;
+    line-height: 1;
+  }
+
+  &__text {
+    flex: 1;
+    font-size: $dd-font-size-body;
+    @include dd-ellipsis(1);
+  }
+}
+</style>

package/components/dd-popup/dd-popup.vue

@@ -0,0 +1,243 @@
+<template>
+  <view class="dd-popup" :style="{ '--dd-popup-duration': `${props.duration}s` }">
+    <view
+      v-if="visible && overlay"
+      class="dd-popup__overlay"
+      :class="{ 'dd-popup__overlay--show': showClass }"
+      :style="{ zIndex: overlayZIndex }"
+      @click="onOverlayClick"
+      @touchmove.stop.prevent="noop"
+    ></view>
+    <view
+      v-if="visible"
+      class="dd-popup__panel"
+      :class="[
+        `dd-popup__panel--${position}`,
+        { 'dd-popup__panel--show': showClass, 'dd-popup__panel--round': round }
+      ]"
+      :style="panelStyle"
+    >
+      <view v-if="closeable" class="dd-popup__close" :class="`dd-popup__close--${closeIconPosition}`" @click="onCloseIcon">
+        <dd-icon name="cross" />
+      </view>
+      <view v-if="position === 'bottom' && safeAreaInsetBottom" class="dd-popup__safe-bottom"></view>
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  modelValue?: boolean
+  position?: 'top' | 'bottom' | 'left' | 'right' | 'center'
+  round?: boolean
+  overlay?: boolean
+  closeable?: boolean
+  closeIconPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+  safeAreaInsetBottom?: boolean
+  duration?: number
+  width?: string
+  height?: string
+  closeOnClickOverlay?: boolean
+  zIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  position: 'bottom',
+  round: false,
+  overlay: true,
+  closeable: false,
+  closeIconPosition: 'top-right',
+  safeAreaInsetBottom: true,
+  duration: 0.3,
+  width: '',
+  height: '',
+  closeOnClickOverlay: true,
+  zIndex: 2000,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'opened'): void
+  (e: 'closed'): void
+  (e: 'click-overlay'): void
+  (e: 'click-close-icon'): void
+}>()
+
+const overlayZIndex = computed(() => props.zIndex)
+const panelZIndex = computed(() => props.zIndex + 1)
+
+const panelStyle = computed(() => {
+  const s: Record<string, string> = {
+    zIndex: String(panelZIndex.value),
+  }
+  if (props.width && (props.position === 'left' || props.position === 'right')) {
+    s.width = props.width
+  }
+  if (props.height && (props.position === 'top' || props.position === 'bottom')) {
+    s.height = props.height
+  }
+  return s
+})
+
+// 两阶段控制：visible 控制挂载，showClass 控制动画
+const visible = ref(false)
+const showClass = ref(false)
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.modelValue,
+  async (val) => {
+    if (timer) {
+      clearTimeout(timer)
+      timer = null
+    }
+
+    if (val) {
+      // Phase 1: 挂载到 DOM（初始态：translateX/Y 离屏 / scale(0.9)）
+      visible.value = true
+      emit('open')
+
+      // Phase 2: 双 RAF 确保 paint 初始帧，再加 show class
+      await nextTick()
+      await new Promise<void>(r => requestAnimationFrame(() => r()))
+      await new Promise<void>(r => requestAnimationFrame(() => r()))
+      showClass.value = true
+      timer = setTimeout(() => emit('opened'), props.duration * 1000)
+    } else {
+      if (!visible.value) return
+
+      // 关闭：移除 show class 触发退出过渡，等动画结束再卸载
+      showClass.value = false
+      emit('close')
+      timer = setTimeout(() => {
+        visible.value = false
+        emit('closed')
+      }, props.duration * 1000)
+    }
+  },
+  { immediate: true }
+)
+
+function noop() {}
+
+function close() {
+  emit('update:modelValue', false)
+}
+
+function onOverlayClick() {
+  emit('click-overlay')
+  if (props.closeOnClickOverlay) close()
+}
+
+function onCloseIcon() {
+  emit('click-close-icon')
+  close()
+}
+
+onUnmounted(() => {
+  if (timer) clearTimeout(timer)
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-popup {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.7);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    opacity: 0;
+    transition: opacity var(--dd-popup-duration, 0.3s) ease;
+
+    &--show {
+      opacity: 1;
+    }
+  }
+
+  &__panel {
+    position: fixed;
+    background: $dd-bg-elevated;
+    box-shadow: $dd-shadow-3;
+    transition: transform var(--dd-popup-duration, 0.3s) ease,
+                opacity var(--dd-popup-duration, 0.3s) ease;
+
+    &--top {
+      top: 0;
+      left: 0;
+      right: 0;
+      transform: translateY(-100%);
+      &.dd-popup__panel--round { border-radius: 0 0 $dd-radius-lg $dd-radius-lg; }
+      &.dd-popup__panel--show { transform: translateY(0); }
+    }
+
+    &--bottom {
+      bottom: 0;
+      left: 0;
+      right: 0;
+      transform: translateY(100%);
+      &.dd-popup__panel--round { border-radius: $dd-radius-lg $dd-radius-lg 0 0; }
+      &.dd-popup__panel--show { transform: translateY(0); }
+    }
+
+    &--left {
+      top: 0;
+      bottom: 0;
+      left: 0;
+      transform: translateX(-100%);
+      &.dd-popup__panel--round { border-radius: 0 $dd-radius-lg $dd-radius-lg 0; }
+      &.dd-popup__panel--show { transform: translateX(0); }
+    }
+
+    &--right {
+      top: 0;
+      bottom: 0;
+      right: 0;
+      transform: translateX(100%);
+      &.dd-popup__panel--round { border-radius: $dd-radius-lg 0 0 $dd-radius-lg; }
+      &.dd-popup__panel--show { transform: translateX(0); }
+    }
+
+    &--center {
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%) scale(0.9);
+      opacity: 0;
+      &.dd-popup__panel--round { border-radius: $dd-radius-lg; }
+      &.dd-popup__panel--show {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+      }
+    }
+  }
+
+  &__close {
+    position: absolute;
+    width: 56rpx;
+    height: 56rpx;
+    color: $dd-text-tertiary;
+    font-size: 44rpx;
+    @include dd-flex-center;
+    z-index: 2;
+
+    &--top-left { top: 16rpx; left: 16rpx; }
+    &--top-right { top: 16rpx; right: 16rpx; }
+    &--bottom-left { bottom: 16rpx; left: 16rpx; }
+    &--bottom-right { bottom: 16rpx; right: 16rpx; }
+  }
+
+  &__safe-bottom {
+    @include dd-safe-area-bottom;
+  }
+}
+</style>

package/components/dd-progress/dd-progress.vue

@@ -0,0 +1,255 @@
+<template>
+  <view class="dd-progress" :class="[`dd-progress--${type}`]">
+    <!-- linear -->
+    <template v-if="type === 'linear'">
+      <view class="dd-progress__track">
+        <view
+          v-if="!indeterminate"
+          class="dd-progress__fill"
+          :style="{ width: pct + '%', background: fillColor }"
+        ></view>
+        <view v-else class="dd-progress__fill dd-progress__fill--indeterminate" :style="{ background: fillColor }"></view>
+      </view>
+      <text v-if="showText && !indeterminate" class="dd-progress__text">{{ pct }}%</text>
+    </template>
+
+    <!-- circular -->
+    <template v-else-if="type === 'circular'">
+      <view
+        class="dd-progress__circle"
+        :style="{
+          width: size + 'rpx',
+          height: size + 'rpx',
+          background: `conic-gradient(${ringColor} ${pct}%, ${trackColor} ${pct}% 100%)`,
+        }"
+      >
+        <view class="dd-progress__circle-mask" :style="{ width: `calc(100% - ${strokeWidth * 2}rpx)`, height: `calc(100% - ${strokeWidth * 2}rpx)` }">
+          <text v-if="showText" class="dd-progress__circle-text">{{ pct }}%</text>
+        </view>
+      </view>
+    </template>
+
+    <!-- steps -->
+    <template v-else>
+      <view class="dd-progress__steps">
+        <view v-for="i in stepCount" :key="i" class="dd-progress__step-node">
+          <view
+            class="dd-progress__dot"
+            :class="[
+              `dd-progress__dot--${stepStatus(i - 1)}`,
+              { 'dd-progress__dot--current': stepStatus(i - 1) === 'current' },
+            ]"
+          ></view>
+          <view
+            v-if="i < stepCount"
+            class="dd-progress__connector"
+            :class="{ 'dd-progress__connector--done': i - 1 < completedCount }"
+          ></view>
+        </view>
+      </view>
+    </template>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'linear' | 'circular' | 'steps'
+  percentage?: number
+  showText?: boolean
+  /** steps 类型的步数 (默认 5) */
+  steps?: number
+  /** 填充色 (linear/circular)，默认金色渐变 */
+  color?: string
+  trackColor?: string
+  /** circular 描边宽度 (rpx) */
+  strokeWidth?: number
+  /** circular 直径 (rpx) */
+  size?: number
+  indeterminate?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'linear',
+  percentage: 0,
+  showText: true,
+  steps: 5,
+  color: '',
+  trackColor: '',
+  strokeWidth: 8,
+  size: 200,
+  indeterminate: false,
+})
+
+const pct = computed(() => Math.max(0, Math.min(100, Math.round(props.percentage))))
+
+const fillColor = computed(
+  () => props.color || `linear-gradient(90deg, #FFC107, #D4891A)` // primary-400 → primary-600
+)
+
+const trackColor = computed(() => props.trackColor || '#2A2A2A')
+
+const ringColor = computed(() => props.color || '#F5A623')
+
+const stepCount = computed(() => Math.max(1, props.steps))
+
+const completedCount = computed(() =>
+  Math.min(stepCount.value, Math.round((pct.value / 100) * stepCount.value))
+)
+
+function stepStatus(i: number): 'done' | 'current' | 'pending' {
+  if (i < completedCount.value) return 'done'
+  if (i === completedCount.value && completedCount.value < stepCount.value) return 'current'
+  return 'pending'
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-progress {
+  width: 100%;
+
+  &--linear {
+    display: flex;
+    align-items: center;
+    gap: $dd-space-2;
+  }
+
+  &__track {
+    flex: 1;
+    height: 12rpx;
+    background: #2a2a2a;
+    border-radius: $dd-radius-full;
+    overflow: hidden;
+    position: relative;
+  }
+
+  &__fill {
+    height: 100%;
+    border-radius: $dd-radius-full;
+    @include dd-transition(width 0.3s ease);
+    box-shadow: 0 0 16rpx rgba(245, 166, 35, 0.5);
+    position: relative;
+    overflow: hidden;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.3),
+        transparent
+      );
+      animation: dd-progress-shimmer 1.5s linear infinite;
+    }
+
+    &--indeterminate {
+      width: 40% !important;
+      animation: dd-progress-indeterminate 1.5s ease-in-out infinite;
+    }
+  }
+
+  &__text {
+    font-size: $dd-font-size-caption;
+    color: $dd-text-secondary;
+    font-variant-numeric: tabular-nums;
+    flex-shrink: 0;
+  }
+
+  // circular
+  // ponytail: conic-gradient 在部分小程序旧版本不支持，升级路径为 transform 旋转双半圆或 SVG
+  &__circle {
+    border-radius: 50%;
+    margin: 0 auto;
+    @include dd-flex-center;
+  }
+
+  &__circle-mask {
+    border-radius: 50%;
+    background: $dd-surface;
+    @include dd-flex-center;
+  }
+
+  &__circle-text {
+    font-size: $dd-font-size-lead;
+    font-weight: 700;
+    color: $dd-text-primary;
+    font-variant-numeric: tabular-nums;
+  }
+
+  // steps
+  &__steps {
+    display: flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  &__step-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    position: relative;
+
+    &:last-child {
+      flex: 0 0 24rpx;
+    }
+  }
+
+  &__dot {
+    width: 24rpx;
+    height: 24rpx;
+    border-radius: 50%;
+    background: #2a2a2a;
+    flex-shrink: 0;
+    @include dd-transition(all 0.3s ease);
+
+    &--done,
+    &--current {
+      background: $dd-gradient-primary;
+      box-shadow: 0 0 12rpx rgba(245, 166, 35, 0.5);
+    }
+
+    &--current {
+      transform: scale(1.2);
+    }
+  }
+
+  &__connector {
+    flex: 1;
+    height: 4rpx;
+    margin: 0 8rpx;
+    background: #2a2a2a;
+    @include dd-transition(background 0.3s ease);
+
+    &--done {
+      background: $dd-primary-500;
+    }
+  }
+}
+
+@keyframes dd-progress-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes dd-progress-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(250%);
+  }
+}
+</style>