@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-skeleton/dd-skeleton.vue

@@ -0,0 +1,184 @@
+<template>
+  <view class="dd-skeleton">
+    <template v-if="loading">
+      <!-- text -->
+      <template v-if="type === 'text'">
+        <view class="dd-skeleton__line dd-skeleton__line--title"></view>
+        <view
+          v-for="(w, i) in lineWidths"
+          :key="i"
+          class="dd-skeleton__line"
+          :style="{ width: w + '%' }"
+        ></view>
+      </template>
+
+      <!-- card -->
+      <template v-else-if="type === 'card'">
+        <view class="dd-skeleton__card">
+          <view class="dd-skeleton__block dd-skeleton__card-img"></view>
+          <view class="dd-skeleton__card-body">
+            <view class="dd-skeleton__block dd-skeleton__line dd-skeleton__line--title"></view>
+            <view class="dd-skeleton__block dd-skeleton__line" style="width: 80%"></view>
+            <view class="dd-skeleton__block dd-skeleton__line" style="width: 60%"></view>
+          </view>
+        </view>
+      </template>
+
+      <!-- list -->
+      <template v-else-if="type === 'list'">
+        <view
+          v-for="i in rows"
+          :key="i"
+          class="dd-skeleton__list-item"
+        >
+          <view v-if="avatar" class="dd-skeleton__block dd-skeleton__avatar dd-skeleton__avatar--sm"></view>
+          <view class="dd-skeleton__list-text">
+            <view class="dd-skeleton__block dd-skeleton__line" style="width: 40%"></view>
+            <view class="dd-skeleton__block dd-skeleton__line" style="width: 70%"></view>
+          </view>
+        </view>
+      </template>
+
+      <!-- avatar -->
+      <template v-else-if="type === 'avatar'">
+        <view class="dd-skeleton__block dd-skeleton__avatar dd-skeleton__avatar--lg"></view>
+      </template>
+
+      <!-- image -->
+      <template v-else-if="type === 'image'">
+        <view class="dd-skeleton__block dd-skeleton__image-block"></view>
+      </template>
+    </template>
+
+    <slot v-else></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  type?: 'text' | 'card' | 'list' | 'avatar' | 'image'
+  rows?: number
+  avatar?: boolean
+  loading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  type: 'text',
+  rows: 3,
+  avatar: false,
+  loading: true,
+})
+
+// 递减宽度 [100,92,85,75,65]% 循环
+const WIDTHS = [100, 92, 85, 75, 65]
+
+const lineWidths = computed(() => {
+  const arr: number[] = []
+  for (let i = 0; i < props.rows; i++) {
+    arr.push(WIDTHS[i % WIDTHS.length])
+  }
+  return arr
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-skeleton {
+  width: 100%;
+
+  &__block {
+    position: relative;
+    overflow: hidden;
+    background: $dd-neutral-800; // var(--dd-skeleton-bg)
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      transform: translateX(-100%);
+      background: linear-gradient(
+        90deg,
+        transparent,
+        rgba(255, 255, 255, 0.08),
+        transparent
+      );
+      animation: dd-skeleton-shimmer 1.5s ease-in-out infinite;
+    }
+  }
+
+  &__line {
+    height: 28rpx;
+    border-radius: $dd-radius-sm;
+    margin-bottom: 20rpx;
+    @extend .dd-skeleton__block;
+
+    &--title {
+      height: 36rpx;
+      width: 50%;
+      margin-bottom: 24rpx;
+    }
+  }
+
+  &__card {
+    border-radius: $dd-radius-lg;
+    overflow: hidden;
+  }
+
+  &__card-img {
+    width: 100%;
+    padding-bottom: 56.25%; // 16:9
+    border-radius: $dd-radius-lg;
+  }
+
+  &__card-body {
+    padding: $dd-space-4;
+  }
+
+  &__list-item {
+    display: flex;
+    align-items: center;
+    gap: $dd-space-3;
+    padding: $dd-space-3 0;
+    @include dd-hairline-bottom($dd-border-subtle);
+  }
+
+  &__list-text {
+    flex: 1;
+    min-width: 0;
+  }
+
+  &__avatar {
+    border-radius: 50%;
+
+    &--sm {
+      width: 80rpx;
+      height: 80rpx;
+      flex-shrink: 0;
+    }
+
+    &--lg {
+      width: 128rpx;
+      height: 128rpx;
+    }
+  }
+
+  &__image-block {
+    width: 100%;
+    padding-bottom: 100%; // 1:1
+    border-radius: $dd-radius-lg;
+  }
+}
+
+@keyframes dd-skeleton-shimmer {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(100%);
+  }
+}
+</style>

package/components/dd-slider/dd-slider.vue

@@ -0,0 +1,227 @@
+<template>
+  <view class="dd-slider" :class="{ 'dd-slider--disabled': disabled }">
+    <view
+      class="dd-slider__track"
+      :style="trackStyle"
+      @touchstart="onTouchStart"
+      @touchmove.stop.prevent="onTouchMove"
+      @touchend="onTouchEnd"
+      @mousedown="onMouseDown"
+    >
+      <view class="dd-slider__fill" :style="fillStyle"></view>
+      <view class="dd-slider__thumb" :class="{ 'dd-slider__thumb--active': dragging }" :style="thumbStyle">
+        <view v-if="showTooltip && dragging" class="dd-slider__tooltip">
+          <text class="dd-slider__tooltip-text">{{ displayValue }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue'
+
+interface Props {
+  modelValue?: number
+  min?: number
+  max?: number
+  step?: number
+  disabled?: boolean
+  showTooltip?: boolean
+  activeColor?: string
+  trackColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  min: 0,
+  max: 100,
+  step: 1,
+  disabled: false,
+  showTooltip: false,
+  activeColor: '',
+  trackColor: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+  (e: 'drag-start'): void
+  (e: 'drag-end'): void
+}>()
+
+const instance = getCurrentInstance()
+const dragging = ref(false)
+const trackRect = ref({ left: 0, width: 1 })
+
+const percent = computed(() => {
+  if (props.max === props.min) return 0
+  const p = ((props.modelValue - props.min) / (props.max - props.min)) * 100
+  return Math.max(0, Math.min(100, p))
+})
+
+const displayValue = computed(() => {
+  const v = props.modelValue
+  return Number.isInteger(v) ? v : Number(v.toFixed(1))
+})
+
+const fillStyle = computed(() => {
+  const s: Record<string, string> = { width: percent.value + '%' }
+  if (props.activeColor) s.background = props.activeColor
+  return s
+})
+const thumbStyle = computed(() => {
+  const s: Record<string, string> = { left: percent.value + '%' }
+  if (props.activeColor) s.borderColor = props.activeColor
+  return s
+})
+const trackStyle = computed(() => {
+  return props.trackColor ? { background: props.trackColor } : {}
+})
+
+function queryRect(): Promise<any> {
+  return new Promise((resolve) => {
+    const query = uni.createSelectorQuery().in(instance!.proxy as any)
+    query
+      .select('.dd-slider__track')
+      .boundingClientRect((rect) => resolve(rect as any))
+      .exec()
+  })
+}
+
+function snap(val: number) {
+  if (props.step <= 1) return val // ponytail: step<=1 视为连续，不做吸附
+  const steps = Math.round((val - props.min) / props.step)
+  return props.min + steps * props.step
+}
+
+function updateFromClientX(x: number) {
+  const { left, width } = trackRect.value
+  let p = (x - left) / (width || 1)
+  p = Math.max(0, Math.min(1, p))
+  let val = props.min + p * (props.max - props.min)
+  val = snap(val)
+  val = Math.max(props.min, Math.min(props.max, val))
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+async function startDrag(clientX: number) {
+  if (props.disabled) return
+  const rect = await queryRect()
+  if (rect) trackRect.value = { left: rect.left, width: rect.width || 1 }
+  dragging.value = true
+  emit('drag-start')
+  updateFromClientX(clientX)
+}
+
+function onTouchStart(e: any) {
+  if (props.disabled) return
+  const x = e.touches?.[0]?.clientX ?? 0
+  startDrag(x)
+}
+function onTouchMove(e: any) {
+  if (!dragging.value) return
+  const x = e.touches?.[0]?.clientX ?? 0
+  updateFromClientX(x)
+}
+function onTouchEnd() {
+  if (!dragging.value) return
+  dragging.value = false
+  emit('drag-end')
+}
+
+function onMouseDown(e: any) {
+  // #ifdef H5
+  if (props.disabled) return
+  startDrag(e.clientX)
+  const onMove = (ev: MouseEvent) => updateFromClientX(ev.clientX)
+  const onUp = () => {
+    dragging.value = false
+    emit('drag-end')
+    window.removeEventListener('mousemove', onMove)
+    window.removeEventListener('mouseup', onUp)
+  }
+  window.addEventListener('mousemove', onMove)
+  window.addEventListener('mouseup', onUp)
+  // #endif
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-slider {
+  padding: 20rpx 0;
+
+  &__track {
+    position: relative;
+    width: 100%;
+    height: 6rpx;
+    border-radius: $dd-radius-full;
+    background: $dd-neutral-800;
+  }
+
+  &__fill {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    border-radius: $dd-radius-full;
+    background: $dd-gradient-primary-h;
+    box-shadow: 0 0 8rpx rgba($dd-primary-400, 0.6);
+  }
+
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    width: 32rpx;
+    height: 32rpx;
+    background: #ffffff;
+    border: 4rpx solid $dd-primary-400;
+    border-radius: 50%;
+    box-shadow: $dd-shadow-glow-gold-lg;
+    transform: translate(-50%, -50%);
+    @include dd-transition(transform 0.1s ease, box-shadow 0.2s ease);
+
+    &--active {
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+  }
+
+  &__tooltip {
+    position: absolute;
+    bottom: calc(100% + 16rpx);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 6rpx 16rpx;
+    @include dd-glass;
+    border-radius: $dd-radius-sm;
+    white-space: nowrap;
+
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -6rpx;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 6rpx solid transparent;
+      border-top-color: $dd-glass-border;
+      border-bottom: 0;
+    }
+  }
+
+  &__tooltip-text {
+    font-size: 24rpx;
+    font-weight: 600;
+    color: $dd-primary-300;
+    line-height: 1.2;
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+  }
+}
+</style>

package/components/dd-stat-card/dd-stat-card.vue

@@ -0,0 +1,174 @@
+<template>
+  <view
+    class="dd-stat-card"
+    :class="[`dd-stat-card--${variant}`]"
+    :hover-class="hoverable ? 'dd-stat-card--press' : ''"
+    :hover-stay-time="100"
+    @click="onClick"
+  >
+    <view class="dd-stat-card__main">
+      <text v-if="title" class="dd-stat-card__title">{{ title }}</text>
+      <view class="dd-stat-card__value-row">
+        <text v-if="prefix" class="dd-stat-card__prefix">{{ prefix }}</text>
+        <text class="dd-stat-card__value">{{ displayValue }}</text>
+        <view v-if="trend !== 'none'" class="dd-stat-card__trend" :class="`dd-stat-card__trend--${trend}`">
+          <dd-icon :name="trend === 'up' ? 'arrow-up' : 'arrow-down'" class="dd-stat-card__trend-arrow" />
+          <text v-if="trendValue" class="dd-stat-card__trend-value">{{ trendValue }}</text>
+        </view>
+      </view>
+      <slot></slot>
+    </view>
+    <view v-if="$slots.footer" class="dd-stat-card__footer">
+      <slot name="footer"></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, useSlots } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface Props {
+  variant?: 'primary' | 'success' | 'warning' | 'error' | 'accent' | 'neutral'
+  trend?: 'none' | 'up' | 'down'
+  title?: string
+  value?: string | number
+  prefix?: string
+  trendValue?: string
+  hoverable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'primary',
+  trend: 'none',
+  title: '',
+  value: '',
+  prefix: '',
+  trendValue: '',
+  hoverable: true,
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+const slots = useSlots()
+void slots
+
+const displayValue = computed(() => String(props.value ?? ''))
+
+function onClick(e: Event) {
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-stat-card {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border-radius: $dd-radius-lg;
+  padding: $dd-space-4;
+  @include dd-transition(transform 0.2s ease);
+
+  &__main {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    font-size: $dd-font-size-caption;
+    font-weight: 500;
+    color: rgba(255, 255, 255, 0.75);
+    line-height: 1.4;
+  }
+
+  &__value-row {
+    display: flex;
+    align-items: baseline;
+    gap: 8rpx;
+    margin-top: $dd-space-1;
+  }
+
+  &__prefix {
+    font-size: $dd-font-size-h3;
+    font-weight: 700;
+    color: #ffffff;
+  }
+
+  &__value {
+    font-size: $dd-font-size-h1;
+    font-weight: 800;
+    color: #ffffff;
+    line-height: 1.2;
+  }
+
+  &__trend {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 4rpx;
+    font-size: $dd-font-size-caption;
+    font-weight: 600;
+    margin-left: $dd-space-1;
+
+    &-arrow {
+      font-size: $dd-font-size-caption;
+      line-height: 1;
+    }
+
+    &--up {
+      color: #ffffff;
+    }
+
+    &--down {
+      color: rgba(255, 255, 255, 0.8);
+    }
+  }
+
+  &__footer {
+    margin-top: $dd-space-3;
+    padding-top: $dd-space-3;
+    border-top: 1px solid rgba(255, 255, 255, 0.15);
+    font-size: $dd-font-size-caption;
+    color: rgba(255, 255, 255, 0.7);
+  }
+
+  &--press {
+    transform: scale(0.98);
+  }
+}
+
+// === 6 渐变变体 ===
+.dd-stat-card--primary {
+  background: $dd-gradient-primary;
+  &:active {
+    box-shadow: $dd-shadow-glow-gold-lg;
+  }
+}
+
+.dd-stat-card--accent {
+  background: $dd-gradient-accent-wide;
+  &:active {
+    box-shadow: $dd-shadow-glow-blue-lg;
+  }
+}
+
+.dd-stat-card--success {
+  background: $dd-gradient-success;
+}
+
+.dd-stat-card--warning {
+  background: $dd-gradient-warning;
+}
+
+.dd-stat-card--error {
+  background: $dd-gradient-error;
+}
+
+.dd-stat-card--neutral {
+  background: $dd-gradient-neutral;
+  border: 1px solid $dd-neutral-600;
+}
+</style>