@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-navigation/dd-navigation.vue

@@ -0,0 +1,134 @@
+<template>
+  <view
+    class="dd-nav"
+    :class="{
+      'dd-nav--fixed': fixed,
+      'dd-nav--border': border,
+    }"
+  >
+    <view
+      v-for="(item, index) in items"
+      :key="index"
+      class="dd-nav__item"
+      :class="{ 'dd-nav__item--active': index === modelValue }"
+      @click="onSelect(index)"
+    >
+      <view
+        v-if="index === modelValue"
+        class="dd-nav__indicator"
+      ></view>
+      <slot name="icon" :item="item" :index="index" :active="index === modelValue">
+        <dd-icon :name="item.icon" class="dd-nav__icon" />
+      </slot>
+      <text class="dd-nav__label">{{ item.label }}</text>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface NavItem {
+  icon: string
+  label: string
+  [key: string]: any
+}
+
+interface Props {
+  modelValue?: number
+  items?: NavItem[]
+  fixed?: boolean
+  border?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: 0,
+  items: () => [],
+  fixed: true,
+  border: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: number): void
+  (e: 'change', val: number): void
+}>()
+
+function onSelect(index: number) {
+  if (index === props.modelValue) return
+  emit('update:modelValue', index)
+  emit('change', index)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-nav {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-around;
+  align-items: center;
+  width: 100%;
+  height: 112rpx;
+  background: $dd-surface;
+  box-sizing: border-box;
+
+  &--border {
+    @include dd-hairline-top($dd-border-subtle);
+  }
+
+  &--fixed {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $dd-z-index-sticky;
+    @include dd-safe-area-bottom;
+  }
+
+  &__item {
+    position: relative;
+    flex: 1;
+    height: 100%;
+    @include dd-flex-center;
+    flex-direction: column;
+    gap: 4rpx;
+    color: $dd-text-tertiary;
+    @include dd-transition(color 0.3s);
+
+    &--active {
+      color: $dd-primary-400;
+      .dd-nav__icon {
+        text-shadow: 0 0 12px rgba(245, 166, 35, 0.5);
+      }
+      .dd-nav__label {
+        font-weight: 500;
+      }
+    }
+  }
+
+  &__indicator {
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 48rpx;
+    height: 4rpx;
+    border-radius: 0 0 $dd-radius-sm $dd-radius-sm;
+    background: $dd-gradient-primary-h;
+    box-shadow: $dd-shadow-glow-gold-sm;
+  }
+
+  &__icon {
+    font-size: 40rpx;
+    line-height: 1;
+  }
+
+  &__label {
+    font-size: 24rpx;
+    line-height: 1.2;
+    @include dd-ellipsis(1);
+  }
+}
+</style>

package/components/dd-overlay/dd-overlay.vue

@@ -0,0 +1,114 @@
+<template>
+  <view
+    class="dd-overlay"
+    :class="{ 'dd-overlay--show': modelValue }"
+    :style="{ zIndex: zIndex, '--dd-overlay-duration': `${duration}s` }"
+    @click="onClick"
+    @touchmove="onTouchMove"
+    @touchmove.stop.prevent="onTouchMove"
+  >
+    <slot></slot>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  lockScroll?: boolean
+  zIndex?: number
+  duration?: number
+  closeOnClickOverlay?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  lockScroll: true,
+  zIndex: 2000,
+  duration: 0.3,
+  closeOnClickOverlay: true,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'click'): void
+}>()
+
+// 模块级引用计数器：堆叠 overlay 时正确解锁 (ponytail: 全局计数，多实例共享)
+let ddOverlayLockCount = 0
+// 确保多组件实例共享同一计数：挂在全局对象上
+const g: any = typeof globalThis !== 'undefined' ? globalThis : ({} as any)
+if (g.__DD_OVERLAY_LOCK_COUNT__ === undefined) {
+  g.__DD_OVERLAY_LOCK_COUNT__ = 0
+}
+
+function lockScroll() {
+  if (!props.lockScroll) return
+  if (g.__DD_OVERLAY_LOCK_COUNT__ === 0) {
+    // #ifdef H5
+    document.body.style.overflow = 'hidden'
+    // #endif
+  }
+  g.__DD_OVERLAY_LOCK_COUNT__++
+}
+
+function unlockScroll() {
+  if (!props.lockScroll) return
+  if (g.__DD_OVERLAY_LOCK_COUNT__ > 0) {
+    g.__DD_OVERLAY_LOCK_COUNT__--
+    if (g.__DD_OVERLAY_LOCK_COUNT__ === 0) {
+      // #ifdef H5
+      document.body.style.overflow = ''
+      // #endif
+    }
+  }
+}
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (val) lockScroll()
+    else unlockScroll()
+  }
+)
+
+function onClick() {
+  emit('click')
+  if (props.closeOnClickOverlay) {
+    emit('update:modelValue', false)
+  }
+}
+
+function onTouchMove() {
+  // MP: catch touchmove 阻止背景滚动穿透 (touchmove.stop.prevent 已在模板处理)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.7);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  // visibility 延迟过渡：opacity 先淡出，再隐藏 (ponytail: 离散属性需 transition-delay)
+  transition: opacity var(--dd-overlay-duration, 0.3s) ease,
+              visibility 0s linear var(--dd-overlay-duration, 0.3s);
+
+  &--show {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity var(--dd-overlay-duration, 0.3s) ease,
+                visibility 0s linear 0s;
+  }
+}
+</style>

package/components/dd-picker/dd-picker.vue

@@ -0,0 +1,203 @@
+<template>
+  <view class="dd-picker" :class="{ 'dd-picker--open': show }">
+    <view class="dd-picker__mask" @click="onMaskClick"></view>
+    <view class="dd-picker__sheet">
+      <view class="dd-picker__toolbar">
+        <text class="dd-picker__cancel" @click="onCancel">取消</text>
+        <text class="dd-picker__title">{{ title }}</text>
+        <text class="dd-picker__confirm" @click="onConfirm">确定</text>
+      </view>
+      <view class="dd-picker__body">
+        <picker-view
+          class="dd-picker__wheels"
+          :value="indexes"
+          @change="onPickerChange"
+        >
+          <picker-view-column v-for="(col, ci) in normalizedColumns" :key="ci">
+            <view v-for="(item, ii) in col" :key="ii" class="dd-picker__item">
+              <text class="dd-picker__item-text">{{ item.text }}</text>
+            </view>
+          </picker-view-column>
+        </picker-view>
+        <view v-if="loading" class="dd-picker__layer">
+          <text class="dd-picker__layer-text">加载中...</text>
+        </view>
+        <view v-else-if="readonly" class="dd-picker__layer"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue'
+
+interface PickerItem {
+  text: string
+  value: any
+}
+
+interface Props {
+  show?: boolean
+  columns?: PickerItem[] | PickerItem[][]
+  title?: string
+  loading?: boolean
+  readonly?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  show: false,
+  columns: () => [],
+  title: '',
+  loading: false,
+  readonly: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:show', val: boolean): void
+  (e: 'confirm', val: { values: any[]; indexes: number[]; items: PickerItem[] }): void
+  (e: 'cancel'): void
+  (e: 'change', val: { values: any[]; indexes: number[] }): void
+}>()
+
+const normalizedColumns = computed<PickerItem[][]>(() => {
+  const c = props.columns as any
+  if (!c || !c.length) return []
+  if (Array.isArray(c[0])) return c as PickerItem[][]
+  return [c as PickerItem[]]
+})
+
+const indexes = ref<number[]>([])
+
+watch(
+  () => normalizedColumns.value,
+  (cols) => {
+    const next = cols.map((_, i) => indexes.value[i] ?? 0)
+    indexes.value = next
+  },
+  { immediate: true }
+)
+
+function emitChange() {
+  const items = normalizedColumns.value.map((col, i) => col[indexes.value[i] ?? 0] || { text: '', value: null })
+  return {
+    values: items.map((it) => it.value),
+    indexes: indexes.value.slice(),
+    items,
+  }
+}
+
+function onPickerChange(e: any) {
+  indexes.value = (e?.detail?.value ?? []).slice()
+  const data = emitChange()
+  emit('change', { values: data.values, indexes: data.indexes })
+}
+
+function close() {
+  emit('update:show', false)
+}
+function onMaskClick() {
+  onCancel()
+}
+function onCancel() {
+  emit('cancel')
+  close()
+}
+function onConfirm() {
+  if (props.loading || props.readonly) return
+  emit('confirm', emitChange())
+  close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+:deep(.uni-picker-view-mask) {
+  background-image: linear-gradient(180deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%)), linear-gradient(0deg, hsl(0deg 0% 9% / 95%), hsl(0deg 0% 9% / 60%));
+}
+.dd-picker {
+  &__mask {
+    position: fixed;
+    inset: 0;
+    z-index: $dd-z-index-overlay;
+    background: rgba(0, 0, 0, 0.7);
+    opacity: 0;
+    pointer-events: none;
+    @include dd-transition(opacity 0.3s);
+  }
+
+  &__sheet {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: $dd-z-index-popup;
+    background: $dd-neutral-800;
+    border-radius: $dd-radius-lg $dd-radius-lg 0 0;
+    transform: translateY(100%);
+    @include dd-transition(transform 0.3s);
+    @include dd-safe-area-bottom;
+  }
+
+  &--open &__mask {
+    opacity: 1;
+    pointer-events: auto;
+  }
+  &--open &__sheet {
+    transform: translateY(0);
+  }
+
+  &__toolbar {
+    @include dd-flex-between;
+    height: 96rpx;
+    padding: 0 32rpx;
+    @include dd-hairline-bottom($dd-border-default);
+  }
+  &__cancel {
+    font-size: 28rpx;
+    color: $dd-text-secondary;
+  }
+  &__title {
+    flex: 1;
+    text-align: center;
+    font-size: 32rpx;
+    font-weight: 600;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+  &__confirm {
+    font-size: 28rpx;
+    font-weight: 600;
+    color: $dd-primary-500;
+  }
+
+  &__body {
+    position: relative;
+  }
+  &__wheels {
+    width: 100%;
+    height: 440rpx;
+  }
+
+  &__item {
+    @include dd-flex-center;
+    height: 88rpx;
+  }
+  &__item-text {
+    font-size: 28rpx;
+    color: $dd-text-primary;
+    @include dd-ellipsis(1);
+  }
+
+  &__layer {
+    position: absolute;
+    inset: 0;
+    @include dd-flex-center;
+    background: rgba($dd-neutral-800, 0.6);
+  }
+  &__layer-text {
+    font-size: 24rpx;
+    color: $dd-text-tertiary;
+  }
+}
+</style>

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

@@ -0,0 +1,190 @@
+<template>
+  <view class="dd-popover" :class="`dd-popover--${theme}`">
+    <view class="dd-popover__trigger" @click="onTriggerClick">
+      <slot></slot>
+    </view>
+    <view
+      v-if="modelValue"
+      class="dd-popover__mask"
+      :style="{ zIndex: maskZIndex }"
+      @click="onMaskClick"
+    ></view>
+    <view
+      v-if="modelValue"
+      class="dd-popover__panel"
+      :class="[`dd-popover__panel--${placement}`, `dd-popover__panel--${theme}`]"
+      :style="panelStyle"
+    >
+      <view class="dd-popover__arrow" :class="`dd-popover__arrow--${placement}`"></view>
+      <view class="dd-popover__content">
+        <slot name="actions"></slot>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, provide } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  placement?: 'top' | 'bottom' | 'left' | 'right'
+  theme?: 'light' | 'dark'
+  closeOnClickAction?: boolean
+  closeOnClickOverlay?: boolean
+  offset?: number
+  zIndex?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  placement: 'bottom',
+  theme: 'light',
+  closeOnClickAction: true,
+  closeOnClickOverlay: true,
+  offset: 16,
+  zIndex: 2000,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'select', value: any): void
+  (e: 'open'): void
+  (e: 'close'): void
+}>()
+
+const maskZIndex = computed(() => props.zIndex - 1)
+
+const panelStyle = computed(() => {
+  const offsetRpx = `${props.offset}rpx`
+  const s: Record<string, string> = { zIndex: String(props.zIndex) }
+  // 偏移通过 margin 表达，避免覆盖 transform
+  if (props.placement === 'top') s.marginBottom = offsetRpx
+  if (props.placement === 'bottom') s.marginTop = offsetRpx
+  if (props.placement === 'left') s.marginRight = offsetRpx
+  if (props.placement === 'right') s.marginLeft = offsetRpx
+  return s
+})
+
+function close() {
+  emit('update:modelValue', false)
+  emit('close')
+}
+
+function onTriggerClick() {
+  if (props.modelValue) {
+    close()
+  } else {
+    emit('update:modelValue', true)
+    emit('open')
+  }
+}
+
+function onMaskClick() {
+  if (props.closeOnClickOverlay) close()
+}
+
+// provide 给 dd-popover-item 调用，中继点击
+provide('ddPopover', {
+  onSelect(value: any) {
+    emit('select', value)
+    if (props.closeOnClickAction) close()
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-popover {
+  position: relative;
+  display: inline-flex;
+
+  &__trigger {
+    display: inline-flex;
+  }
+
+  &__mask {
+    position: fixed;
+    inset: 0;
+    background: transparent;
+  }
+
+  &__panel {
+    position: absolute;
+    min-width: 240rpx;
+    max-width: 480rpx;
+    border-radius: $dd-radius-lg;
+    box-shadow: $dd-shadow-2;
+    overflow: visible;
+    z-index: 2000;
+
+    &--light {
+      background: $dd-bg-elevated;
+      color: $dd-text-primary;
+      .dd-popover__arrow { background: $dd-bg-elevated; }
+    }
+    &--dark {
+      background: $dd-neutral-700;
+      color: $dd-color-white;
+      .dd-popover__arrow { background: $dd-neutral-700; }
+    }
+
+    &--bottom {
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &--top {
+      bottom: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+    &--left {
+      right: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    &--right {
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+
+  &__arrow {
+    position: absolute;
+    width: 16rpx;
+    height: 16rpx;
+    transform: rotate(45deg);
+
+    &--bottom {
+      top: -8rpx;
+      left: 50%;
+      margin-left: -8rpx;
+    }
+    &--top {
+      bottom: -8rpx;
+      left: 50%;
+      margin-left: -8rpx;
+    }
+    &--left {
+      right: -8rpx;
+      top: 50%;
+      margin-top: -8rpx;
+    }
+    &--right {
+      left: -8rpx;
+      top: 50%;
+      margin-top: -8rpx;
+    }
+  }
+
+  &__content {
+    position: relative;
+    border-radius: $dd-radius-lg;
+    overflow: hidden;
+  }
+}
+</style>