@didaoktv/didaoui-uniapp 1.0.0

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

@@ -0,0 +1,248 @@
+<template>
+  <view class="dd-swipe-action" :class="{ 'dd-swipe-action--disabled': disabled }">
+    <!-- 左侧操作层 (右滑露出) -->
+    <view class="dd-swipe-action__actions dd-swipe-action__actions--left" :style="{ width: leftWidthPx + 'px' }">
+      <view
+        v-for="(action, i) in leftActions"
+        :key="'l' + i"
+        class="dd-swipe-action__btn"
+        :style="{ width: actionWidthPx + 'px', background: action.color || defaultActionColor }"
+        @click="onActionClick('left', i, action)"
+      >
+        <dd-icon v-if="action.icon" :name="action.icon" class="dd-swipe-action__icon" />
+        <text class="dd-swipe-action__label">{{ action.text }}</text>
+      </view>
+    </view>
+    <!-- 右侧操作层 (左滑露出) -->
+    <view class="dd-swipe-action__actions dd-swipe-action__actions--right" :style="{ width: rightWidthPx + 'px' }">
+      <view
+        v-for="(action, i) in rightActions"
+        :key="'r' + i"
+        class="dd-swipe-action__btn"
+        :style="{ width: actionWidthPx + 'px', background: action.color || defaultActionColor }"
+        @click="onActionClick('right', i, action)"
+      >
+        <dd-icon v-if="action.icon" :name="action.icon" class="dd-swipe-action__icon" />
+        <text class="dd-swipe-action__label">{{ action.text }}</text>
+      </view>
+    </view>
+    <!-- 内容层 (前置，可平移) -->
+    <view
+      class="dd-swipe-action__content"
+      :class="{ 'dd-swipe-action__content--anim': animating }"
+      :style="{ transform: `translateX(${translateX}px)` }"
+      @touchstart="onTouchStart"
+      @touchmove.stop.prevent="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchEnd"
+    >
+      <slot></slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface SwipeAction {
+  text?: string
+  icon?: string
+  color?: string
+}
+
+interface Props {
+  leftActions?: SwipeAction[]
+  rightActions?: SwipeAction[]
+  disabled?: boolean
+  actionWidth?: number // rpx
+  threshold?: number
+  damping?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  leftActions: () => [],
+  rightActions: () => [],
+  disabled: false,
+  actionWidth: 144,
+  threshold: 0.33,
+  damping: 0.3,
+})
+
+const emit = defineEmits<{
+  (e: 'click', payload: { side: 'left' | 'right'; index: number; action: SwipeAction }): void
+  (e: 'open', side: 'left' | 'right'): void
+  (e: 'close'): void
+}>()
+
+// 默认操作色用 error 红 ($dd-error-500)
+const defaultActionColor = '#E53935'
+
+const translateX = ref(0)
+const animating = ref(false)
+
+let startX = 0
+let startTranslate = 0
+let dragging = false
+let moved = false
+
+const actionWidthPx = computed(() => rpxToPx(props.actionWidth))
+const leftWidthPx = computed(() => actionWidthPx.value * props.leftActions.length)
+const rightWidthPx = computed(() => actionWidthPx.value * props.rightActions.length)
+
+function rpxToPx(rpx: number): number {
+  try {
+    const info = uni.getWindowInfo()
+    return (rpx / 750) * info.windowWidth
+  } catch {
+    return rpx / 2
+  }
+}
+
+function onTouchStart(e: any) {
+  if (props.disabled) return
+  dragging = true
+  moved = false
+  animating.value = false
+  startX = e.touches?.[0]?.clientX ?? 0
+  startTranslate = translateX.value
+}
+
+function onTouchMove(e: any) {
+  if (!dragging || props.disabled) return
+  const x = e.touches?.[0]?.clientX ?? 0
+  let delta = x - startX
+  if (Math.abs(delta) > 4) moved = true
+  let next = startTranslate + delta
+  // 边界阻尼：超出左/右操作宽度时按 (1-damping) 衰减
+  if (next > leftWidthPx.value) {
+    next = leftWidthPx.value + (next - leftWidthPx.value) * (1 - props.damping)
+  }
+  if (next < -rightWidthPx.value) {
+    next = -rightWidthPx.value + (next + rightWidthPx.value) * (1 - props.damping)
+  }
+  translateX.value = next
+}
+
+function onTouchEnd() {
+  if (!dragging) return
+  dragging = false
+  animating.value = true
+  const cur = translateX.value
+  // 轻点内容关闭已展开操作
+  if (!moved) {
+    if (cur !== 0) {
+      translateX.value = 0
+      emit('close')
+    }
+    return
+  }
+  // 0.33 阈值吸附
+  const leftOpen = cur > leftWidthPx.value * props.threshold
+  const rightOpen = cur < -rightWidthPx.value * props.threshold
+  if (leftOpen && leftWidthPx.value > 0) {
+    translateX.value = leftWidthPx.value
+    emit('open', 'left')
+  } else if (rightOpen && rightWidthPx.value > 0) {
+    translateX.value = -rightWidthPx.value
+    emit('open', 'right')
+  } else {
+    translateX.value = 0
+    emit('close')
+  }
+}
+
+function onActionClick(side: 'left' | 'right', index: number, action: SwipeAction) {
+  emit('click', { side, index, action })
+  animating.value = true
+  translateX.value = 0
+  emit('close')
+}
+
+function close() {
+  animating.value = true
+  translateX.value = 0
+}
+
+defineExpose({ close })
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-swipe-action {
+  position: relative;
+  overflow: hidden;
+  background: $dd-bg-elevated;
+
+  &--disabled {
+    .dd-swipe-action__content {
+      pointer-events: auto;
+    }
+  }
+
+  &__actions {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    z-index: 0;
+
+    &--left {
+      left: 0;
+      .dd-swipe-action__btn {
+        @include dd-flex-center;
+        flex-direction: column;
+      }
+    }
+    &--right {
+      right: 0;
+      flex-direction: row-reverse;
+      .dd-swipe-action__btn {
+        @include dd-flex-center;
+        flex-direction: column;
+      }
+    }
+  }
+
+  &__btn {
+    height: 100%;
+    box-sizing: border-box;
+    padding: 0 12rpx;
+    color: $dd-color-white;
+    @include dd-flex-center;
+    flex-direction: column;
+    gap: 8rpx;
+    overflow: hidden;
+  }
+
+  &__icon {
+    font-size: $dd-font-size-h3;
+    line-height: 1;
+  }
+
+  &__label {
+    font-size: $dd-font-size-body;
+    font-weight: 500;
+    line-height: 1.2;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  }
+
+  &__content {
+    position: relative;
+    z-index: 1;
+    width: 100%;
+    background: $dd-bg-elevated;
+    transform: translateX(0);
+
+    &--anim {
+      // cubic-bezier 来自 JSON traits: 0.25, 0.46, 0.45, 0.94
+      transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,27 @@
+<template>
+  <swiper-item class="dd-swipe-item">
+    <slot></slot>
+  </swiper-item>
+</template>
+
+<script setup lang="ts">
+import { inject, onMounted, onUnmounted } from 'vue'
+
+// inject 父级 dd-swipe 的注册器；不在 dd-swipe 内时为 null，静默忽略
+const swipe = inject<{ register: () => void; unregister: () => void } | null>('ddSwipe', null)
+
+onMounted(() => {
+  swipe?.register()
+})
+
+onUnmounted(() => {
+  swipe?.unregister()
+})
+</script>
+
+<style lang="scss" scoped>
+.dd-swipe-item {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/components/dd-swipeable-tab/dd-swipeable-tab.vue

@@ -0,0 +1,202 @@
+<template>
+  <view class="dd-swipe">
+    <view
+      v-if="mode === 'fixed'"
+      ref="trackRef"
+      class="dd-swipe__track dd-swipe__track--fixed"
+    >
+      <view
+        v-for="(opt, index) in options"
+        :key="index"
+        class="dd-swipe__item"
+        :class="{ 'dd-swipe__item--active': index === modelValue }"
+        @click="onSelect(index)"
+      >
+        <text class="dd-swipe__label">{{ labelOf(opt) }}</text>
+      </view>
+      <view class="dd-swipe__indicator" :style="indicatorStyle"></view>
+    </view>
+
+    <scroll-view
+      v-if="mode === 'scrollable'"
+      scroll-x
+      class="dd-swipe__scroll"
+      :scroll-left="scrollLeft"
+      :scroll-with-animation="true"
+    >
+      <view ref="trackRef" class="dd-swipe__track dd-swipe__track--scroll">
+        <view
+          v-for="(opt, index) in options"
+          :key="index"
+          class="dd-swipe__item dd-swipe__item--scroll"
+          :class="{ 'dd-swipe__item--active': index === modelValue }"
+          @click="onSelect(index)"
+        >
+          <text class="dd-swipe__label">{{ labelOf(opt) }}</text>
+        </view>
+        <view class="dd-swipe__indicator" :style="indicatorStyle"></view>
+      </view>
+    </scroll-view>
+    <view class="dd-swipe__divider"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { nextTick, onMounted, ref, watch } from 'vue'
+import { getCurrentInstance } from 'vue'
+
+interface Props {
+  modelValue?: number
+  options?: (string | { label: string })[]
+  mode?: 'fixed' | 'scrollable'
+  lineWidth?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  options: () => [],
+  mode: 'fixed',
+  lineWidth: 0,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+const instance = getCurrentInstance()
+const indicatorStyle = ref({ width: '0px', transform: 'translateX(0px)' })
+const scrollLeft = ref(0)
+
+function labelOf(opt: string | { label: string }): string {
+  return typeof opt === 'string' ? opt : opt.label
+}
+
+function onSelect(index: number) {
+  if (index === props.modelValue) return
+  emit('update:modelValue', index)
+  emit('change', index)
+  measure()
+}
+
+function rpxToPx(rpx: number): number {
+  const w = uni.getWindowInfo?.().windowWidth || 375
+  return (rpx * w) / 750
+}
+
+function measure() {
+  nextTick(() => {
+    const query = uni.createSelectorQuery().in(instance)
+    const itemSel =
+      props.mode === 'scrollable' ? '.dd-swipe__item--scroll' : '.dd-swipe__item'
+    query
+      .selectAll(itemSel)
+      .boundingClientRect()
+      .select('.dd-swipe__track')
+      .boundingClientRect()
+      .exec((res) => {
+        const items = (res[0] || []) as UniApp.NodeInfo[]
+        const track = res[1] as UniApp.NodeInfo
+        if (!items.length || !track) return
+        const target = items[props.modelValue]
+        if (!target) return
+        const itemLeft = (target.left || 0) - (track.left || 0)
+        const itemWidth = target.width || 0
+        const indWidth = props.lineWidth
+          ? rpxToPx(props.lineWidth)
+          : itemWidth * 0.6
+        const indLeft = itemLeft + (itemWidth - indWidth) / 2
+        indicatorStyle.value = {
+          width: indWidth + 'px',
+          transform: `translateX(${indLeft}px)`,
+        }
+        if (props.mode === 'scrollable') {
+          const viewW = track.width || 0
+          scrollLeft.value = Math.max(0, itemLeft + itemWidth / 2 - viewW / 2)
+        }
+      })
+  })
+}
+
+onMounted(measure)
+watch(() => props.modelValue, measure)
+watch(() => props.options, measure)
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-swipe {
+  width: 100%;
+}
+
+.dd-swipe__track {
+  position: relative;
+  height: 88rpx;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.dd-swipe__track--fixed {
+  width: 100%;
+  .dd-swipe__item {
+    flex: 1;
+  }
+}
+
+.dd-swipe__track--scroll {
+  display: inline-flex;
+  .dd-swipe__item--scroll {
+    flex-shrink: 0;
+    padding: 0 $dd-space-4;
+  }
+}
+
+.dd-swipe__scroll {
+  width: 100%;
+  white-space: nowrap;
+}
+
+.dd-swipe__item {
+  @include dd-flex-center;
+  height: 100%;
+  padding: 0 $dd-space-4;
+  color: $dd-text-tertiary;
+  font-size: $dd-font-size-body;
+  font-weight: 500;
+  box-sizing: border-box;
+  @include dd-transition(color 0.3s);
+
+  &--active {
+    color: $dd-primary-400;
+    font-weight: 600;
+    .dd-swipe__label {
+      text-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
+    }
+  }
+}
+
+.dd-swipe__label {
+  line-height: 1.2;
+  @include dd-ellipsis(1);
+}
+
+.dd-swipe__indicator {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  height: 4rpx;
+  background: $dd-gradient-primary-h;
+  border-radius: $dd-radius-full;
+  box-shadow: $dd-shadow-glow-gold-sm;
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
+    width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.dd-swipe__divider {
+  height: 1px;
+  background: $dd-neutral-800;
+}
+</style>

package/components/dd-switch/dd-switch.vue

@@ -0,0 +1,106 @@
+<template>
+  <view
+    class="dd-switch"
+    :class="[
+      `dd-switch--${size}`,
+      {
+        'dd-switch--on': modelValue,
+        'dd-switch--disabled': disabled,
+      },
+    ]"
+    @click="onToggle"
+  >
+    <view class="dd-switch__thumb"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue?: boolean
+  size?: 'md' | 'sm'
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  size: 'md',
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'change', val: boolean): void
+}>()
+
+function onToggle() {
+  if (props.disabled) return
+  const next = !props.modelValue
+  emit('update:modelValue', next)
+  emit('change', next)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-switch {
+  position: relative;
+  flex-shrink: 0;
+  border-radius: $dd-radius-full;
+  box-sizing: border-box;
+  @include dd-transition(background 0.3s, box-shadow 0.3s, border-color 0.3s);
+
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    left: 6rpx;
+    transform: translateY(-50%);
+    background: #ffffff;
+    border-radius: 50%;
+    box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
+    @include dd-transition(left 0.3s cubic-bezier(0.34, 1.56, 0.64, 1));
+  }
+
+  // off
+  background: $dd-neutral-800;
+  border: 1px solid $dd-glass-border;
+  box-shadow: inset 0 2rpx 6rpx rgba(0, 0, 0, 0.3);
+
+  // on
+  &--on {
+    background: $dd-gradient-primary;
+    border-color: rgba($dd-primary-300, 0.5);
+    box-shadow: $dd-shadow-glow-gold-lg, inset 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
+  }
+
+  &--disabled {
+    opacity: 0.4;
+    @include dd-no-touch;
+  }
+}
+
+.dd-switch--md {
+  width: 96rpx;
+  height: 56rpx;
+  .dd-switch__thumb {
+    width: 44rpx;
+    height: 44rpx;
+  }
+  &.dd-switch--on .dd-switch__thumb {
+    left: calc(100% - 50rpx);
+  }
+}
+
+.dd-switch--sm {
+  width: 76rpx;
+  height: 44rpx;
+  .dd-switch__thumb {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  &.dd-switch--on .dd-switch__thumb {
+    left: calc(100% - 38rpx);
+  }
+}
+</style>

package/components/dd-tabbar/dd-tabbar.vue

@@ -0,0 +1,112 @@
+<template>
+  <view
+    v-if="placeholder && fixed"
+    class="dd-tabbar__placeholder"
+    :class="{ 'dd-tabbar__placeholder--safe': safeAreaInsetBottom }"
+  ></view>
+  <view
+    class="dd-tabbar"
+    :class="{
+      'dd-tabbar--fixed': fixed,
+      'dd-tabbar--border': border,
+      'dd-tabbar--safe': safeAreaInsetBottom,
+    }"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, ref } from 'vue'
+
+interface Props {
+  modelValue?: string | number
+  fixed?: boolean
+  border?: boolean
+  placeholder?: boolean
+  safeAreaInsetBottom?: boolean
+  activeColor?: string
+  inactiveColor?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  fixed: true,
+  border: true,
+  placeholder: true,
+  safeAreaInsetBottom: true,
+  activeColor: '#F5A623',
+  inactiveColor: '#9E9E9E',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string | number): void
+  (e: 'change', val: string | number): void
+}>()
+
+const counter = ref(0)
+
+function register(): number {
+  const idx = counter.value
+  counter.value += 1
+  return idx
+}
+
+function onItemClick(val: string | number) {
+  if (val === props.modelValue) return
+  emit('update:modelValue', val)
+  emit('change', val)
+}
+
+const active = computed(() => props.modelValue)
+
+provide('ddTabbar', {
+  active,
+  activeColor: computed(() => props.activeColor),
+  inactiveColor: computed(() => props.inactiveColor),
+  register,
+  onItemClick,
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-tabbar {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  height: 100rpx;
+  background: $dd-surface;
+  box-sizing: border-box;
+
+  &--border {
+    @include dd-hairline-top($dd-border-default);
+  }
+
+  &--safe {
+    box-sizing: content-box;
+    @include dd-safe-area-bottom;
+  }
+
+  &--fixed {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $dd-z-index-sticky;
+  }
+}
+
+.dd-tabbar__placeholder {
+  width: 100%;
+  height: 100rpx;
+  box-sizing: content-box;
+
+  &--safe {
+    @include dd-safe-area-bottom;
+  }
+}
+</style>