@didaoktv/didaoui-uniapp 1.0.0

package/components/dd-drawer/dd-drawer.vue

@@ -0,0 +1,214 @@
+<template>
+  <view class="dd-drawer">
+    <view
+      class="dd-drawer__mask"
+      :class="{ 'dd-drawer__mask--show': modelValue }"
+      @click="onMaskClick"
+    ></view>
+    <view
+      class="dd-drawer__panel"
+      :class="[`dd-drawer__panel--${position}`, { 'dd-drawer__panel--show': modelValue }]"
+      :style="{ width: width }"
+    >
+      <view v-if="$slots.header" class="dd-drawer__header">
+        <slot name="header"></slot>
+      </view>
+      <view v-else class="dd-drawer__header dd-drawer__header--vip">
+        <view class="dd-drawer__avatar">
+          <image
+            v-if="avatar"
+            class="dd-drawer__avatar-img"
+            :src="avatar"
+            mode="aspectFill"
+          />
+          <text v-else class="dd-drawer__avatar-fallback">{{ username ? username.charAt(0) : '客' }}</text>
+        </view>
+        <view class="dd-drawer__user">
+          <view class="dd-drawer__user-row">
+            <text class="dd-drawer__username">{{ username }}</text>
+            <text class="dd-drawer__vip-badge">VIP</text>
+          </view>
+          <text v-if="vipLevel" class="dd-drawer__level">{{ vipLevel }}</text>
+        </view>
+      </view>
+      <scroll-view scroll-y class="dd-drawer__content">
+        <slot></slot>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue'
+
+interface Props {
+  modelValue?: boolean
+  position?: 'left' | 'right'
+  width?: string
+  maskClosable?: boolean
+  avatar?: string
+  username?: string
+  vipLevel?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: false,
+  position: 'left',
+  width: '80%',
+  maskClosable: true,
+  avatar: '',
+  username: '',
+  vipLevel: '',
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void
+  (e: 'open'): void
+  (e: 'close'): void
+  (e: 'opened'): void
+  (e: 'closed'): void
+}>()
+
+let timer: ReturnType<typeof setTimeout> | null = null
+
+watch(
+  () => props.modelValue,
+  (val) => {
+    if (timer) clearTimeout(timer)
+    if (val) {
+      emit('open')
+      timer = setTimeout(() => emit('opened'), 300)
+    } else {
+      emit('close')
+      timer = setTimeout(() => emit('closed'), 300)
+    }
+  }
+)
+
+function onMaskClick() {
+  if (!props.maskClosable) return
+  emit('update:modelValue', false)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-drawer__mask {
+  position: fixed;
+  inset: 0;
+  background: $dd-glass-bg;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  opacity: 0;
+  visibility: hidden;
+  z-index: 1000;
+  @include dd-transition(opacity 0.3s ease, visibility 0.3s ease);
+
+  &--show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.dd-drawer__panel {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background: $dd-surface;
+  overflow: hidden;
+  z-index: 1001;
+  // ponytail: cubic-bezier 取 iOS 标准滑出曲线，遮罩淡入同期 0.3s，合上略快收尾
+  transition: transform 0.32s cubic-bezier(0.22, 0.61, 0.36, 1);
+  will-change: transform;
+  &--left {
+    left: 0;
+    transform: translateX(-100%);
+  }
+
+  &--right {
+    right: 0;
+    transform: translateX(100%);
+  }
+
+  &--show {
+    transform: translateX(0);
+  }
+}
+
+.dd-drawer__header {
+  flex-shrink: 0;
+
+  &--vip {
+    padding: 64rpx 32rpx 32rpx;
+    background: $dd-gradient-primary;
+    display: flex;
+    align-items: center;
+    gap: 24rpx;
+  }
+}
+
+.dd-drawer__avatar {
+  width: 112rpx;
+  height: 112rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.2);
+  border: 2px solid rgba(255, 255, 255, 0.3);
+  overflow: hidden;
+  @include dd-flex-center;
+  flex-shrink: 0;
+}
+
+.dd-drawer__avatar-img {
+  width: 100%;
+  height: 100%;
+}
+
+.dd-drawer__avatar-fallback {
+  font-size: 40rpx;
+  color: $dd-neutral-900;
+  font-weight: 700;
+}
+
+.dd-drawer__user {
+  display: flex;
+  flex-direction: column;
+  gap: 8rpx;
+  min-width: 0;
+}
+
+.dd-drawer__user-row {
+  display: flex;
+  align-items: center;
+  gap: 12rpx;
+}
+
+.dd-drawer__username {
+  font-size: $dd-font-size-h3;
+  font-weight: 700;
+  color: $dd-neutral-900;
+  @include dd-ellipsis(1);
+}
+
+.dd-drawer__vip-badge {
+  background: $dd-surface;
+  color: $dd-primary-400;
+  font-size: 20rpx;
+  font-weight: 700;
+  padding: 2rpx 10rpx;
+  border-radius: $dd-radius-sm;
+}
+
+.dd-drawer__level {
+  font-size: $dd-font-size-caption;
+  color: rgba(10, 10, 10, 0.7);
+}
+
+.dd-drawer__content {
+  flex: 1;
+  height: 0;
+}
+</style>

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

@@ -0,0 +1,203 @@
+<template>
+  <view class="dd-dropdown-item" :class="{ 'dd-dropdown-item--disabled': disabled }">
+    <view
+      class="dd-dropdown-item__trigger"
+      :class="{ 'dd-dropdown-item__trigger--open': isOpen }"
+      :style="{ color: isOpen ? activeColor : '' }"
+      @click="onTrigger"
+    >
+      <text class="dd-dropdown-item__title">{{ displayTitle }}</text>
+      <dd-icon
+        name="arrow-down"
+        class="dd-dropdown-item__arrow"
+        :class="{ 'dd-dropdown-item__arrow--open': isOpen }"
+      />
+    </view>
+    <view
+      v-if="ctx"
+      class="dd-dropdown-item__panel"
+      :class="[
+        `dd-dropdown-item__panel--${direction}`,
+        { 'dd-dropdown-item__panel--open': isOpen },
+      ]"
+      :style="panelStyle"
+    >
+      <scroll-view scroll-y class="dd-dropdown-item__scroll">
+        <view
+          v-for="(opt, i) in options"
+          :key="i"
+          class="dd-dropdown-item__option"
+          :class="{ 'dd-dropdown-item__option--active': opt.value === modelValue }"
+          :style="{ color: opt.value === modelValue ? activeColor : '' }"
+          @click="onSelect(opt)"
+        >
+          <image
+            v-if="opt.icon"
+            class="dd-dropdown-item__option-icon"
+            :src="opt.icon"
+            mode="aspectFit"
+          />
+          <text class="dd-dropdown-item__option-text">{{ opt.text }}</text>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { computed, inject, ref } from 'vue'
+import DdIcon from '../dd-icon/dd-icon.vue'
+
+interface DropdownOption {
+  text: string
+  value: any
+  icon?: string
+}
+
+interface Props {
+  title?: string
+  options?: DropdownOption[]
+  modelValue?: any
+  disabled?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  title: '',
+  options: () => [],
+  modelValue: null,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'change', val: any): void
+}>()
+
+const ctx = inject<any>('ddDropdown', null)
+const id = ref(ctx ? ctx.register() : -1)
+
+const isOpen = computed(() => ctx && ctx.activeId.value === id.value)
+const direction = computed(() => (ctx ? ctx.direction : 'down'))
+const activeColor = computed(() => (ctx ? ctx.activeColor : '#F5A623'))
+
+const displayTitle = computed(() => {
+  if (props.title) return props.title
+  const sel = props.options.find((o) => o.value === props.modelValue)
+  return sel ? sel.text : ''
+})
+
+const panelStyle = computed(() => {
+  if (!ctx) return {}
+  const winH = uni.getWindowInfo?.().windowHeight || 667
+  if (direction.value === 'down') {
+    return { top: ctx.barRect.bottom + 'px', left: '0', right: '0' }
+  }
+  return { bottom: winH - ctx.barRect.top + 'px', left: '0', right: '0' }
+})
+
+function onTrigger() {
+  if (props.disabled || !ctx) return
+  ctx.toggle(id.value)
+}
+
+function onSelect(opt: DropdownOption) {
+  emit('update:modelValue', opt.value)
+  emit('change', opt.value)
+  ctx?.close()
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-dropdown-item {
+  flex: 1;
+  min-width: 0;
+
+  &--disabled {
+    opacity: 0.5;
+    @include dd-no-touch;
+  }
+
+  &__trigger {
+    @include dd-flex-center;
+    gap: 8rpx;
+    height: 96rpx;
+    padding: 0 16rpx;
+    color: $dd-text-primary;
+    font-size: $dd-font-size-body;
+    @include dd-transition(color 0.3s);
+  }
+
+  &__title {
+    @include dd-ellipsis(1);
+  }
+
+  &__arrow {
+    font-size: 24rpx;
+    line-height: 1;
+    @include dd-transition(transform 0.3s);
+
+    &--open {
+      transform: rotate(180deg);
+    }
+  }
+
+  &__panel {
+    position: fixed;
+    z-index: 10;
+    background: $dd-surface;
+    max-height: 50vh;
+    overflow: hidden;
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    @include dd-transition(transform 0.3s ease, opacity 0.3s ease, visibility 0.3s);
+
+    &--down {
+      transform: translateY(-100%);
+    }
+
+    &--up {
+      transform: translateY(100%);
+    }
+
+    &--open {
+      transform: translateY(0);
+      opacity: 1;
+      visibility: visible;
+      z-index: 11;
+      pointer-events: auto;
+    }
+  }
+
+  &__scroll {
+    max-height: 50vh;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: 16rpx;
+    height: 80rpx;
+    padding: 0 32rpx;
+    font-size: $dd-font-size-body;
+    color: $dd-text-primary;
+    @include dd-transition(color 0.2s);
+
+    &--active {
+      font-weight: 600;
+    }
+  }
+
+  &__option-icon {
+    width: 40rpx;
+    height: 40rpx;
+  }
+
+  &__option-text {
+    @include dd-ellipsis(1);
+  }
+}
+</style>

package/components/dd-dropdown-menu/dd-dropdown-menu.vue

@@ -0,0 +1,177 @@
+<template>
+  <view class="dd-dropdown" :class="{ 'dd-dropdown--active': activeId !== null }" ref="rootRef">
+    <view class="dd-dropdown__bar">
+      <slot></slot>
+    </view>
+    <view
+      v-if="overlay"
+      class="dd-dropdown__overlay"
+      :class="{ 'dd-dropdown__overlay--show': activeId !== null }"
+      :style="overlayStyle"
+      @click="onOverlayClick"
+    ></view>
+  </view>
+</template>
+
+<script lang="ts">
+// 整页级别互斥：同时只允许一个 dd-dropdown-menu 展开下拉
+// ponytail: 模块级单例变量，跨实例共享；页面切换时组件 onUnmounted 会清空，无泄漏
+let activeMenuClose: (() => void) | null = null
+</script>
+
+<script setup lang="ts">
+import { getCurrentInstance, onMounted, onUnmounted, provide, reactive, ref } from 'vue'
+
+interface Props {
+  activeColor?: string
+  direction?: 'down' | 'up'
+  overlay?: boolean
+  closeOnClickOverlay?: boolean
+  closeOnClickOutside?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  activeColor: '#F5A623',
+  direction: 'down',
+  overlay: true,
+  closeOnClickOverlay: true,
+  closeOnClickOutside: true,
+})
+
+const emit = defineEmits<{ (e: 'change', id: number): void }>()
+
+const activeId = ref<number | null>(null)
+const counter = ref(0)
+const barRect = reactive({ top: 0, bottom: 0, height: 0 })
+const overlayStyle = ref({})
+const rootRef = ref<any>(null)
+const instance = getCurrentInstance()
+
+function register(): number {
+  const id = counter.value
+  counter.value += 1
+  return id
+}
+
+function measureBar() {
+  const query = uni.createSelectorQuery().in(instance)
+  query
+    .select('.dd-dropdown__bar')
+    .boundingClientRect((rect) => {
+      const r = rect as UniApp.NodeInfo
+      if (!r) return
+      barRect.top = r.top || 0
+      barRect.bottom = r.bottom || 0
+      barRect.height = r.height || 0
+      const winH = uni.getWindowInfo?.().windowHeight || 667
+      if (props.direction === 'down') {
+        overlayStyle.value = {
+          top: barRect.bottom + 'px',
+          bottom: '0',
+        }
+      } else {
+        overlayStyle.value = {
+          top: '0',
+          bottom: winH - barRect.top + 'px',
+        }
+      }
+    })
+    .exec()
+}
+
+function toggle(id: number) {
+  if (activeId.value === id) {
+    close()
+  } else {
+    if (activeMenuClose && activeMenuClose !== close) activeMenuClose()
+    activeId.value = id
+    activeMenuClose = close
+    measureBar()
+  }
+}
+
+function close() {
+  activeId.value = null
+  if (activeMenuClose === close) activeMenuClose = null
+}
+
+function onOverlayClick() {
+  if (props.closeOnClickOverlay) close()
+}
+
+provide('ddDropdown', {
+  activeId,
+  direction: props.direction,
+  activeColor: props.activeColor,
+  barRect,
+  register,
+  toggle,
+  close,
+})
+
+onMounted(measureBar)
+onUnmounted(() => {
+  if (activeMenuClose === close) activeMenuClose = null
+})
+
+// H5 outside click
+// #ifdef H5
+function onDocClick(e: MouseEvent) {
+  if (activeId.value === null) return
+  if (!props.closeOnClickOutside) return
+  // trigger / option 自有 click 处理，内部点击不在此关闭
+  if (rootRef.value?.contains(e.target as Node)) return
+  close()
+}
+onMounted(() => {
+  document.addEventListener('click', onDocClick)
+})
+onUnmounted(() => {
+  document.removeEventListener('click', onDocClick)
+})
+// #endif
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-dropdown {
+  position: relative;
+  width: 100%;
+
+  // 激活时整体抬高层级，避免被同页其他菜单的 bar 盖住 panel
+  &--active {
+    z-index: 100;
+  }
+}
+
+.dd-dropdown__bar {
+  position: relative;
+  z-index: 11;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  height: 96rpx;
+  background: $dd-surface;
+  @include dd-hairline-bottom($dd-border-subtle);
+}
+
+.dd-dropdown__overlay {
+  position: fixed;
+  left: 0;
+  right: 0;
+  background: $dd-glass-bg;
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  z-index: 9;
+  opacity: 0;
+  visibility: hidden;
+  @include dd-transition(opacity 0.3s, visibility 0.3s);
+
+  &--show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+</style>